رفتن به مطلب
گروه تلگرام وردپرس
erfan

گالری عکس html5 + آموزش ساخت!

پست های پیشنهاد شده

یک گالری عکس بی نظیر که با HTML5 طراحی شده ...

.

محتوای مخفی

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

دمو رو ببینید...

قابلیت ها:

HTML5 که عرض کردم!!

Drag&Drop هست...

استفاده از jQuery UI

قشنگه! (تعریف بیخود نکو :| )

تو پست بعدی آموزش ساختش قرار میگیره...

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

میگم عرفان فوکاس کردی رو گالری ول کن هم نیستی نه (قالب گالری ، اسکریپت گالری و...) ؟! :39:

چندتا نکته :

اون مدل از drag&drop که استفاده کردی،کاربرد استفاده ش واسه گالری نیست.

موفق باشید:53:

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
میگم عرفان فوکاس کردی رو گالری ول کن هم نیستی نه (قالب گالری ، اسکریپت گالری و...) ؟! :39:

چندتا نکته :

اون مدل از drag&drop که استفاده کردی،کاربرد استفاده ش واسه گالری نیست.

موفق باشید:53:

مگه اشکالی داره؟:(

حالا چیکار با Drag&Drop ش داری :|:| خودت فک کن چند تا عکس داری رو یه صفحه مثلا اونجوری یا اینجوری ، دوست نداری بتونی تکونشون بدی و اینجا و اونجا بذاریشون؟:-"( بروبابا با این مثال زدنت ):|:| بعد اونوقت این یه نکته بود یا چند نکته؟:78:

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

HTML5 Gallery

خوب همونطور که قولش رو داده بودم قرار بود آموزش ساخت این گالری عکس رو هم قرار بدم!

برای شروع نیاز هست ما چند کتابخانه رو به پروژه اضافه کنیم که به شرح زیر هستند :

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>

فایلهاشون هم موجوده که تو پست اول معرفی کردم!!!:67:

نوبت میرسه به نوشتن کد های HTML :

ابتدا یک دیو از نوع ID برابر با main ایجاد کنید > سپس دیو دیگری با خاصیت ID برابر با gallery در دیو main بسازید ( متوجه نشدی دوباره بخونش )

<div id="main">

<div id="gallery">

</div>
</div>

حالا نوبت میرسه به ایجاد کردن تصاویر موجود در دیو gallery !!

 <div class="pic" style="background:url(img/thumbs/1-california-surfing.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/1-california-surfing.jpg" target="_blank"></a> </div>

همونطور که در کد بالا میبینید دیوی با خاصیت class تعریف شده و نام class برابر با pic هست سپس یک style تعریف شده که خاصیت background رو به اون داده ، برای لینک دادن به عکس یک تگ a در این دیو تعریف شده که گمون نکنم نیاز به توضیح بیشتر باشه!

حالا اگر سورس کامل پروژه رو ببینید ، میبینید که این دیو چند بار تکرار شده و فقط خاصیت background و href اون تغییر کرده...

 <div class="pic" style="background:url(img/thumbs/1-california-surfing.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/1-california-surfing.jpg" target="_blank"></a> </div>


<div class="pic" style="background:url(img/thumbs/2-breast-stroke.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/2-breast-stroke.jpg" target="_blank"></a> </div>


<div class="pic" style="background:url(img/thumbs/4-green-beach.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/4-green-beach.jpg" target="_blank"></a> </div>


<div class="pic" style="background:url(img/thumbs/bahnhoff.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/bahnhoff.jpg" target="_blank"></a> </div>


<div id="pic-5" class="pic" style="background:url(img/thumbs/bamboo.jpg) no-repeat 50% 50%;"> <a class="fancybox" rel="fncbx" href="img/original/bamboo.jpg" target="_blank"></a> </div>

و حالا بریم سراغ اسکریپت نویسی این پروژه ؟:43:?

یک فایل با نام script.js ایجاد کنید...

حالا کد های نوشته شده رو شرح میدیم!

کد زیر برای Drag&Drop کردن دیو ها به کار میره همچنین باعث کنترل کلیک موس میشه!

$(".pic a").bind("click",function(e){

if(preventClick)
{
e.stopImmediatePropagation();
e.preventDefault();
}
});

$(".pic").draggable({

containment: 'parent',
start: function(e,ui){

preventClick=true;
},

stop: function(e, ui) {

setTimeout(function(){ preventClick=false; }, 250);
}
});

کد زیر هم برای نمایش عکس اورجینال به صورت popup و همچنین لایه بندی هوشمند دیو ها !!!

$('.pic').mousedown(function(e){

/* Executed on image click */

var maxZ = 0;

/* Find the max z-index property: */

$('.pic').each(function(){
var thisZ = parseInt($(this).css('zIndex'))
if(thisZ>maxZ) maxZ=thisZ;
});

if($(e.target).hasClass("pic"))
{

$(e.target).css({zIndex:maxZ+1});
}
else $(e.target).closest('.pic').css({zIndex:maxZ+1});
});


$("a.fancybox").fancybox({
zoomSpeedIn: 300,
zoomSpeedOut: 300,
overlayShow:false
});


$('.drop-box').droppable({
hoverClass: 'active',
drop:function(event,ui){

$('#url').val(location.href.replace(location.hash,'')+'#'+ui.draggable.attr('id'));
$('#modal').dialog('open');
}
});


موفق باشید...:53:

ویرایش شده در توسط erfan

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×