تابلو اعلانات

dezaki

کد گالری عکس با قابلیت بزرگ نمایی کلی به طوری که وقتی روی عکس ها کلیک می شود تصویر زوم شده و به جلو حرکت می
کند. این گالری ر و توی سایت گروه طراحی جی دیزاین مشاهده کردم و اینجا قرار دادمش شاید بتونیم ازش استفاده کنیم

دموی کد گالری

بخش HTML کد

درون کد قالب به دنبال کد بگردید و بعد از آن کد زیر را قرار دهید.

کد:
<div id="jDesign">

	    	<div id="jDesign_grid"></div>

	    	<div id="jDesign_note">

	        	راهنمای استفاده

	        	<ul>

	<li><span>موس</span>: حرکت</li>

	<li><span>کلیک</span>: بزرگنمایی تصاویر</li>

	<li><span>گردون موس</span>: زیاد و کم کردن بزرگنمایی</li>

	        	</ul>

	    	</div>

		</div>

		<div id="title"></div>

		<div id="jDesign_caption"></div>

		<img id="loading" alt="" src="images/loading.jpg" style="visibility: hidden">

dezaki

بخش CSS کد

درون کد قالب قبل از بین دو تگ و قرار می گیرد.

کد:
html {

	    	overflow: hidden;

		}

		body {

	    	background: #222;

	    	left: 0px;

	    	top: 0px;

	    	width: 100%;

	    	height: 100%;

	    	margin: 0px;

	    	padding: 0px;

	    	color: #fff;

	    	font-family: verdana, arial, helvetica, sans-serif;

	    	filter: alpha(opacity=100);

		}

		@font-face {

		font-family: 'jdesign';

		src: url('fonts/jdesign.eot?#') format('eot'),  /* IE6–8 */

		url('fonts/jdesign.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/

url('fonts/jdesign.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */

	   	}

		#jDesign {

	    	position:absolute;

left: 10%;

top: 10%;

width: 80%;

height: 80%;

overflow: hidden;

background: #000;

}

#jDesign_grid {

position:absolute;

}

#jDesign_grid img {

position: absolute;

cursor: pointer;

left: -10000px;

-ms-interpolation-mode:nearest-neighbor;

}

#jDesign_grid .over {

border: #fff solid;

}

#jDesign_note {

position: absolute;

font-size: 0.7em;

right: 1em;

top: 1em;

width: 21em;

background: #000;

filter: alpha(opacity=70);

opacity: 0.7;

cursor: help;

padding: 0.2em;

direction:rtl;

font-family:tahoma;

}

#jDesign_note span {

color: #f80;

}

#title {

position: absolute;

font-family:jdesign;

font-size: 1em;

left: 0px;

bottom: 90%;

width: 100%;

text-align: center;

color: #fff;

direction:rtl;

}

#jDesign_caption {

position: absolute;

font-family:jdesign;

font-size: 19px;

left: 0px;

top: 90%;

width: 100%;

text-align: center;

	    	color: #fff;

	    	direction:rtl;

		}

samanpes

این کد ها کار نمی کنه

اول امتحان کن بعد بزار واسه بچه

من این قالبو خیلی وقته دیدیم و هر کاری کردم نتونستم عکس ها شو عوض کنم

کلا این کد های فقط می تونه به دست یه کدنویس ماهر ویرایش بشه و قابل استفاده

با تشکر

dezaki

بخش راه انداز جاوا اسکریپت

در انتهای کد قالب قبل از کد بین دو تگ و قرار می گیرد.

کد:
var O = [];

var iL;

var scr;

var grd;

var grs;

var tit;

var cap;

var xm = 0;

var ym = 0;

var nx = 0;

var ny = 0;

var nw = 0;

var nh = 0;

var cx = 0;

var cy = 0;

var cz = .2;

var Tw = 0;

var Th = 0;

var X  = 0;

var Y  = 0;

var F  = false;

var Fo = false;

var NK = 0;

///////////////////////////////////////

var ZM = .8;  	// init zoom

var NX = 5;  	// jDesign_grid X

var NY = 5;  	// jDesign_grid Y

var NB = 1.2;	// border size

var Mz = NX * 2; // max zoom

var mz = .1; 	// min zoom

var path   = "images/"; // path

var images = [

//	source, title, jDesign_caption

["1.jpg","- 01 -","توضیحات مربوط به عکس 1"],

["2.jpg","- 02 -","توضیحات مربوط به عکس 2"],

["3.jpg","- 03 -","توضیحات مربوط به عکس 3"],

["4.jpg","- 04 -","توضیحات مربوط به عکس 4"],

["5.jpg","- 05 -","توضیحات مربوط به عکس 5"],

["6.jpg","- 06 -","توضیحات مربوط به عکس 6"],

["7.jpg","- 07 -","توضیحات مربوط به عکس 7"],

["8.jpg","- 08 -","توضیحات مربوط به عکس 8"],

["9.jpg","- 09 -","توضیحات مربوط به عکس 9"],

["10.jpg","- 10 -","توضیحات مربوط به عکس 10"],

["11.jpg","- 11 -","توضیحات مربوط به عکس 11"],

["12.jpg","- 12 -","توضیحات مربوط به عکس 12"],

["13.jpg","- 13 -","توضیحات مربوط به عکس 13"],

["14.jpg","- 14 -","توضیحات مربوط به عکس 14"],

["15.jpg","- 15 -","توضیحات مربوط به عکس 15"],

["16.jpg","- 16 -","توضیحات مربوط به عکس 16"],

["17.jpg","- 17 -","توضیحات مربوط به عکس 17"],

["18.jpg","- 18 -","توضیحات مربوط به عکس 8"],

["19.jpg","- 19 -","توضیحات مربوط به عکس 9"],

["20.jpg","- 20 -","توضیحات مربوط به عکس 20"],

["21.jpg","- 21 -","توضیحات مربوط به عکس 21"],

["22.jpg","- 22 -","توضیحات مربوط به عکس 22"],

["23.jpg","- 23 -","توضیحات مربوط به عکس 23"],

["24.jpg","- 24 -","توضیحات مربوط به عکس 24"],

["25.jpg","- 25 -","توضیحات مربوط به عکس 25"]

];

//////////////////////////////////

/* ================== mouse move ====================*/

document.onmousemove = function(e)

{

if (!F)

{

if (window.event)

{

e = window.event;

}

xm = Math.min(nw, Math.max(0, (e.x || e.clientX) - nx));

ym = Math.min(nh, Math.max(0, (e.y || e.clientY) - ny));

}

}

/* ==================== resize ===================== */

function resize()

{

nx = scr.offsetLeft;

ny = scr.offsetTop;

nw = scr.offsetWidth;

nh = scr.offsetHeight;

Tw = nw * cz;

Th = nh * cz;

for (var i in O)

{

O<i>.resize();

}

}

onresize = resize;

/* ============= mouseWheel - IE/Mozilla ============ */

function scroll(e)

{

if (!F)

{

var z = 0;

if (e)

{

/* Moz */

if (e.preventDefault) e.preventDefault();

z = (e.detail > 0) ? 1 :  - 1;

}

else

{

/* IE */

z = (event.wheelDelta  0)

{

if (ZM  mz)

{

/* zoom out */

ZM *= .8;

}

}

}

else

{

/* unlock image */

F = false;

}

return false;

}

if (window.addEventListener)

{

/* Moz */

window.addEventListener('DOMMouseScroll', scroll, false);

}

else

{

/* IE */

document.onmousewheel = scroll;

}

/* =============== images constructor ================= */

function Img(n, x, y)

{

this.x  	= x;

this.y  	= y;

this.n  	= n;

this.loaded = false;

/* create image */

this.img    	= document.createElement("img");

this.img.obj	= this;

this.img.src	= document.getElementById('loading').src;

grd.appendChild(this.img);

this.ims = this.img.style; 

/* preload */

this.pre    	= new Image();

this.pre.obj	= this;

this.pre.onload = function()

{

this.obj.loaded 	= true;

this.obj.img.src	= this.src;

}

this.pre.src	= path + images[n % iL][0];	

/* mouse events */

this.img.ondrag    	= function() { return false; }

this.img.onselectstart = function() { return false; }

this.img.ondblclick	= this.img.onmousedown; 

/* onclick image */

this.img.onmousedown = function()

{

if (this.obj.loaded)

{

if (F)

{

/* zoom out */

ZM = NK;

F  = false;

}

else

{

/* zoom in */

F  = this;

NK = ZM;

ZM = NX + .1;

xm = (((nw / NB) * .5) / NX) + F.obj.x * nw / NX;

ym = (((nh / NB) * .5) / NY) + F.obj.y * nh / NY;

}

}

return false;

}  

/* update text image */

this.img.onmouseover = function()

{

if(Fo)

{

Fo.obj.border(false);

}

if (this.obj.loaded)

{

var i = images[this.obj.n % iL];

tit.innerHTML = i[1];

cap.innerHTML = i[2];

Fo = this;

Fo.obj.border(true);

}

else

{

tit.innerHTML = "";

cap.innerHTML = "";

}

}  

/* resize image */

this.resize = function()

{

this.ims.left   = Math.round(NB * this.x * Tw / NX) + 'px';

this.ims.top	= Math.round(NB * this.y * Th / NY) + 'px';

this.ims.width  = Math.round(Tw / NX) + 'px';

this.ims.height = Math.round(Th / NY) + 'px';

if(this == Fo.obj)

{

this.border(true);

}

}

/* borderSize */

this.border = function(over)

{

var b = 0;

var m = 0;

if (over)

{

b = Math.round(((NB * Th / NY) - (Th / NY)) * .5);

m = 2 - b;

this.img.className = "over";

}

else

{

this.img.className = "";

}

this.ims.borderWidth = b + 'px';

this.ims.marginLeft  = m + 'px';

this.ims.marginTop   = m + 'px';

}

}

/* =============== main loop ==================== */

function run()

{

/* zoom speed */

var vz = (ZM - cz) * .05;

if (Math.abs(vz) > .002)

{

resize();

}

else

{

vz = 0;

}  

/* soften move */

cz += vz;

cx += (xm - cx) * .08;

cy += (ym - cy) * .08; 

/* move jDesign_grid */

grs.left = Math.round((nw * .5) - (NB * cx * Tw / nw)) + 'px';

grs.top  = Math.round((nh * .5) - (NB * cy * Th / nh)) + 'px';

setTimeout(run, 16);

}

/* =================== start ==================== */

onload = function()

{

grd = document.getElementById("jDesign_grid");

grs = grd.style;

scr = document.getElementById("jDesign");

tit = document.getElementById("title");

cap = document.getElementById("jDesign_caption");

iL  = images.length;   

/* create jDesign_grid */

var k = 0;

for (var y = 0; y < NY; y++)

{

for (var x = 0; x < NX; x++)

{

O.push(new Img(k++, x, y));

}

}

/* run */

resize();

cx = xm = nw / 2;

cy = ym = nh / 2;

run();

/* hide jDesign_note */

setTimeout( function () {

document.getElementById('jDesign_note').style.visibility = 'hidden';

}, 30000);

}

</i>

dezaki

نقل قول از samanpes
این کد ها کار نمی کنه

اول امتحان کن بعد بزار واسه بچه

من این قالبو خیلی وقته دیدیم و هر کاری کردم نتونستم عکس ها شو عوض کنم

کلا این کد های فقط می تونه به دست یه کدنویس ماهر ویرایش بشه و قابل استفاده

با تشکر

اگه قابل استفاده نبود نمیزاشتم

samanpes

عکس ها رو نمیشه تغییر دااد برادر من

خودت این ها رو توی صفحات جداگانه بزار ببین کار می کنه

dezaki

عکس ها از طریق کد جاوا اسکریپت فراخونی میشن اگر کسی جاوا بلد باشه میتونه تغییرشون بده

samanpes

خودت تغییرش بده ما ببینیم

بعد بزار توی یه صفحه جداگانه

بعد ادرس بده ما ببینیم

dezaki

من که جاوا بلد نیستم اگر عجله داری برو انجمن جی دیزاینن سوال کن

etmam

جالب بود ( البته باید خلبان باشی تا سرگیجه نگیری

)

خب بدی این گالری به اینه که هرکسی نمیتونه به راحتی عکسش عضو کنه

این گالری برای کد نوبسا مناسب تر بنظر میرسه

تشکر

b-andishe

گالری خوشگلی هستش ها فقط ادم اذیت میشه عکس ها فرار میکنن

این کد رو نمیدونم کجای انجمن دیدم واستون قرار میدمش

اینم
دمـــــــــــــــــــو

کد:
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Image Navigation with jQuery</title> <meta name="description" content="Portfolio Image Navigation with jQuery" /> <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" /> <meta name="author" content="Marcin Dziewulski for Codrops" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> <link href="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/css/style.css" rel="stylesheet" type="text/css" /> <script src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/js/jquery.js" type="text/javascript"></script> <script src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/js/portfolio.js" type="text/javascript"></script> <script src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/js/init.js" type="text/javascript"></script> </head> <body> <h1>Hi...</h1> <div id="portfolio"> <div id="background"></div>	<div class="arrows"> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div> <div class="gallery"> <div class="inside"> <div class="item"> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images/1.jpg" alt="image1" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images/2.jpg" alt="image2" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images/3.jpg.jpg" alt="image3" /></div> </div> <div class="item"> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//4.jpg" alt="image4" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//5.jpg" alt="image5" /></div> </div> <div class="item"> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//6.jpg" alt="image6" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//7.jpg" alt="image7" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//8.jpg" alt="image8" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//9.jpg" alt="image9" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//10.jpg" alt="image10" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//11.jpg" alt="image11" /></div> </div> <div class="item"> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//12.jpg" alt="image12" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//13.jpg" alt="image13" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//14.jpg" alt="image14" /></div> <div><img src="http://gdl-rozblog.persiangig.com/tools/Portfolio_Image_Navinew_folder/images//15.jpg" alt="image15" /></div> </div> </div> </div> </div> </body> </html> <center><a href="http://gdl.rozblog.com">Gdl.rozblog.com</a></center> 

تابلو اعلانات
	قوانین جدید - تالار گفتمان سایت ساز رزبلاگ درخواست تغيير نام کاربري اطلاع رساني از مشکل قالب هاي داخل پنل اطلاع رساني از مشکل امکانات سايت ها پيشنهادات خود را براي امکانات سايت ها و رزآپ اينجا بيان کنيد! پيشنهادات خود را براي امکانات انجمن ها اينجا بيان کنيد! آموزش جامع بهينه سازي سايت براي موتورهاي جستجوگر طراحي بنر ، لوگو ، هدر و ... ( با هزينه ) درخواست ويرايش قالب فقط در اين تاپيک ! تاپیک جامع اخطار ها و کاربران اخراج شده دلیل

تعداد بازدید 575 ++کد گالری عکس با قابلیت بزرگ نمایی کلی (ترکیب css+js+html)
نویسنده	پیام