آموزش طراحی وب سایت – jQuery lightBox plugin

سه شنبه, ۵ام مرداد , ۱۳۸۹ | ۲۲ دیدگاه

با سلام .

در طراحی های امروزی استفاده از تکنیک هایی که کار با وبسایت و همچنین برقراری ارتباط را برای مخاطبان ساده تر می کنه بسیار فراگیر شده . بسیاری از گروه های توسعه وب با ارائه بسته های بسیار کاربردی در ورژن های مختلف به بهبود این قضیه کمک می کنند. قصد داریم به این موضوع بیشتر و به طور ویژه بپردازیم.

jQuery lightBox plugin

یکی از نمونه های پر کاربرد از این بسته های کاربردی lightBox است کا با استفاده از کتابخانه jQuery  ساخته شده است و تا کنون چندین ورژن از آن انتشار پیدا کرده است . البته استفاده از این plugin ها در بین طراحان حرفه ای وب بسیار معمول است .
در زیر نحوه استفاده از اینplugin  را با زبان ساده برای استفاده دوستانی که آشنایی چندانی با استفاده از این plugin ها ندارند توضیح خواهیم داد.





مثالی را از این Plugin ببینید و بسته مربوط به آن را دریافت کنید.در این بسته فولدر های js , images , css , photos و یکی صفحه index.html نیز به عنوان نمونه قرار دارد.

در ابتدا طبق روال استفاده از تمامی Plugin هایی که از کتابخانه jQuery استفاده میکنند این کتابخانه را به همراه فایل js مربوط به خود این بسته در صفحه اضافه می کنیم.


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

بعد از اضافه کردن فایلهای js نوبت به فایل css میرسد که بعد از فایلهای js در قسمت head صفحه اضافه می شود.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

بعد از بار گزاری فایلهای css و js نوبت به فراخوانی آنها میرسد که به وسیله Function زیر انجام می گیرد.


<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

با توجه به function بالا متوجه خواهید شد که می توان با روشهای مختلفی از این plugin استفاده نمود. به طور مثال

$('a[@rel*=lightbox]').lightBox();

بیانگر این است که تمامی image هایی که در بین یک تگ <a></a> قرار گرفته باشند و تگ <a></a> آنها نیز دارای خاصیت rel با مقدار lightbox باشد از lightBox استفاده می کنند.

مانند مثال زیر :

<a href="#" rel="lightbox"><img src="ittutorial.jpg" alt="ittutorial.ir" /></a

طبق معمول به آدرس دهی image ها و نحوه قرارگیری ،نامها و آدرس دهی آنها بسیار دقت کنید.
می توانید از رو شهای دیگر نیز برای بکار گیری این plugin در صفحات وب استفاده نمائید.
می توانید به مثال های موجود در فایل آماده شده برای دانلود نیز مراجعه نمائید و با دقت در کدها روشهای دیگر استفاده از این plugin را نیز ملاحظه نما ئید.

Be Sociable, Share!


۲۲ دیدگاه


  1. sağlık market
    ۵ مرداد ۱۳۸۹

    بیانگر این است که تمامی image هایی که در بین یک تگ قرار گرفته باشند و تگ آنها نیز دارای خاصیت rel با مقدار lightbox باشد از lightBox استفاده می کنند.




  2. امیر
    ۵ مرداد ۱۳۸۹

    همونطور که توضیح دادم طبق مثال تمامی تگ های img که در بین یک تگ a ، دارای خصوصیت rel با مقدار lightbox وجود دارند از این پلاگین استفاده می کنند.
    راههای دیگه ای هم هست که در کد javascript مثالهاش وجود داره.




  3. امیر
    ۶ مرداد ۱۳۸۹

    با تشکر از سایت بسیار پربارتون




  4. میلاد
    ۶ مرداد ۱۳۸۹

    امیرجان بسایرعالی دستت درد نکنه.
    اگربرای شما یا مدیران سایت امکان داره طریقه نصب یه Cmsبه وب سایت رو هم آموزش بدید.
    مثل وردپرس که چطوری میشه به صورت سفارشی دریک سایت ازش استفاده کرد.
    ممنون میشم




  5. یک دانشجوی آی تی
    ۷ مرداد ۱۳۸۹

    سلام فک کنم یکم آموزش سطحش پایینه (خیلی خیلی سادس ) . می شه به جای این نوع آموزش ها از کیس های جالبی که استفاده می شه توسط سایت های دیگه استفاده کرد . مثلا ساختن فلان چیزی که فلان سایت معروف استفاده می کنه . اینطوری خیلی چیزها می شه در یه کیس خاص یاد گرفت . مثلا سیستم کامنت گذاری فیس بوک و ده ها اموزش دیگه .نکته ی دیگه اینکه بهتره توی آموزش هاتون بنویسید سطح آموزشه ….موفق باشید




  6. علي
    ۸ مرداد ۱۳۸۹

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




  7. رضا
    ۱۶ مرداد ۱۳۸۹

    سلام خسته نباشید.مطلب خوب و اموزنده ای بود.




  8. مهدی
    ۲۰ مرداد ۱۳۸۹

    سلام.خیلی وقت بود به سایتتون سر نمیزدم.
    خیلی آموزش خوبی بود ، ممنون.




  9. zashesh
    ۳۱ مرداد ۱۳۸۹

    من نمی دونم چی بگم فقط مرسی




  10. محمود
    ۳۱ مرداد ۱۳۸۹

    خیلی مردی…دمتون گرم..خدا قوت .. ۱در این دنیا ۱۰۰ در آخرت فیض ببرید




  11. masoud
    ۱۶ شهریور ۱۳۸۹

    سلام.از آموزش خیلی خوبی که دادید ممنون.من دنبال یه آدرس عکس از فضای شما هستم.اون عکس مربوط به همین موضوعه.آدرسش اینه=/fotos/XX.jpg
    ولی این آخرشه.من کاملش رو می خوام.اگه بهم میل کنین خیلی خیلی خیلی خیلی خیلی ممنون می شم.
    تو همین یه دونه موندم.اگه بدین که خیلی ممنون می شم.




  12. masoud
    ۲۴ شهریور ۱۳۸۹

    سلام.ازتون خواهش می کنم که آموزش این اسکریپت رو بزارید.
    Animated JavaScript Slideshow
    آدرس این اسپریپت:
    http://www.leigeber.com/2008/12/javascript-slideshow/




  13. سارا
    ۳۰ شهریور ۱۳۸۹

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




  14. mohammad
    ۵ مهر ۱۳۸۹

    سلام عالیه مرسی




  15. فروغ
    ۳ آذر ۱۳۸۹

    خیلی عالی بود ممنون امیر خان،
    اگه آموزشاتونو ادامه بدید خیلی عالی میشه




  16. نامداریان
    ۱۳ دی ۱۳۸۹

    دسته شما درد نکنه. مرسی




  17. صابر فرهادی
    ۶ اردیبهشت ۱۳۹۰

    من تا حالا انقدر مشغول یادگیری این آموزش های خوب بودم که هیچ وقت تشکر نکردم به هر حال عذر خواهی میکنم و از این سایت بسیار خوب تشکر می کنم




  18. sahar
    ۱۷ تیر ۱۳۹۰

    aya emakne tarife maxwidth va ya max height baraye halati k axha khyli bozorgan va dar safhe monitor ja nemishan vojood dare?




  19. sami
    ۷ آذر ۱۳۹۰

    سلام به همه عزیزان
    یکی لطف کنه بگه چه جوری میشه این برنامه روتوی یک تگ اجراکرد.منظورم اینه که کل برنامه توbodyاجرانشه ومختص به یک باشه!امکانش هست؟




  20. tos
    ۹ آذر ۱۳۹۰

    با سلام و احترام
    تشکر به خاطر آموزشاتون، لطفا راهنماییم کنید که کار م کجا اشکال داره من همه ی عکس ها در پوشه های images و photos را در تگ قرار دادم و به آن خاصیت rel دقیقا مثل نمونه ای که گذاشتید چرا لینکهای next … در کنار عکس ها قرار می گیره و عکس ها هم درشت در صفحه و زیر هم نشون می ده. می دونم خیلی سوالم مبتدی و فرصت پاسخ ندارید.




  21. sami
    ۱۱ آذر ۱۳۹۰

    tosجان اگرعکسهازیرهم قرارمیگیره وبصورت اسلایدنمایش داده نمیشه یعنی اینکه jsqueryشماعمل نمیکنه.یکباردیگه اونجاروچک کن.درضمن تو سایزعکس بایددقت کنی وتوقسمت styleسایزروتنظیم کنی.
    البته فضولی نباشه منم مبتدی هستم ودیدم که عین مشکل اولیه منو داری گفتم یه راهنمایی کرده باشم.




  22. تازه کار
    ۲۱ بهمن ۱۳۹۰

    با سلام
    تشکر فراوان دارم از زحمات شما استاد گرامی و بقیه دوستان
    چند تا پیشنهاد دارم:
    اول: جلو عنوان هر درس مختصر موضوع درس را اشاره بفرمایید به طور مثال درس نهم : حرکت تصاویر
    دوم: برخی موارد برای شما اساتید بدیهی است اما اشاره به آنها برای تازه کارها مفید است به طور مثال ترجمه این عبارت در ابتدای صفحه
    lightbox plugin is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

    در خاتمه باز هم سپاسگزارم و شاگرد شما



دیدگاه خود را بنویسید