پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

می خواهیم توسط پلاگین Lightbox، تصاویری که در صفحات خود داریم را در پنجره ای به صورت ایجکس نمایش دهیم همراه با افکتی زیبا.
البته این پلاگین برای سیستم هایی مثل مووبل تایپ یا وردپرس، هماهنگ شده است و خیلی راحت می توانید از آن در این سیستم ها استفاده کنید. پلاگین Lightbox برای مووبل تایپ را از اینجا و برای وردپرس را از اینجا دریافت کنید.
مسلما این آموزش برای کسانی است که از موبل تایپ یا وردپرس استفاده نمی کنند و صرفا می خواهند با خود ِ Lightbox آشنا شوند.

چگونه از پلاگین Lightbox استفاده کنم؟

۱٫ دریافت فایل های موردنیاز:
ابتدا پلاگین Lightbox و سپس کتابخانه ی جی کوئری را دریافت کنید.

Download Lightbox Plugin
Download JQuery Library

نکته: از آنجایی که در تحریم ِ گوگل به سر می بریم، برای دریافت کتابخانه ی جی کوئری، قطعا به مشکل بر می خورید. به همین خاطر می توانید همین الان جی کوئری را از اینجا دریافت کنید.

۲٫ فراخوانی اسکریپت ها و استایل ها:
باید کتابخانه ی جی کوئری و پلاگین Lightbox را در صفحه قرار دهیم. کدهای زیر را بین تگ head قرار دهید:

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

یک فایل سی اس اس هم در پوشه ی پلاگین موجود هست که آن را هم باید در صفحه فراخوانی کنید. توسط کد زیر و مانند کدهای بالا بین تگ head:

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

3. فعال سازی:
برای اینکه تصاویر با Lightbox هماهنگ شوند، احتیاجی به تغییر و اصلاح کدهای اکس اچ تی ام ال ندارید. این پلاگین نهایت انعطاف پذیری را داراست.
فقط لازم هست در صفحه یک همچین چیزی داشته باشید:

<a href="image1.jpg"><img src="thumb_image1.jpg" alt="" width="72" height="72" /></a>

حالا اگر روی این تصاویر کلیک کنیم، Lightbox فراخوانی می شود و افکت را اجرا می کند.

اسکریپت زیر را هم داخل تگ head قرار دهید:

<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>

به این صفحه بروید و نمونه ی آنچه که اینجا یاد گرفتیم را ببینید :)

دیدگاه‌ها (۳۸)

  • خیلی جالب هستش. با پلاگین وردپرسش کار کردم :)

    پاسخ

  • مرسی از آموزش خوبت…:)

    پاسخ

  • خسته نباشی مهندس.بدون پلاگین بهتر جواب میده :دی

    پاسخ

  • بله جالب هست :)

    پاسخ

  • خواهش میکنم امیرجان :)

    پاسخ

  • آره خب.

    پاسخ

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

    پاسخ

  • سلام…
    مرسی مرتضی جان :)
    بله حتما میخونم…

    پاسخ

  • خیلی سپاس
    قشنگ بود

    پاسخ

  • واقعا مرسی خیلی کامل و جامع بود

    پاسخ

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

    پاسخ

  • خواهش میکنم صندوقک جان قابلی نداشت :)

    پاسخ

  • بله. اینجا هم دوست خوبم مبین توضیح کاملی در رابطه با استفاده از این پلاگین نوشته. هرچند که خودتون استادید :)
    http://www.mobinzk.com/archives/000295.php

    پاسخ

  • سلام همشهری عزیز دامین مبارک باشه .امیدوارم که همیشه موفق باشی راستی علی جان اگه علاقه داری با هم تبادل لینک کنیم .
    شما رو با چه تیتری لینک کنم؟؟
    همیشه شاد و سبز باشید .

    پاسخ

  • سلامی دوباره.
    متاسفانه بعد از تست پلاگین ام تی فهمیدم یه مشکل بزرگ داره: نمی شه توی قالبهای دینامیک ازش استفاده کرد. خیلی بد شد. طفلی آرش کلی خوشحال شده بودا !

    پاسخ

  • جدی؟ نمیدونستم این موضوع رو.
    خب چرا از همین روشی که توضیح دادم استفاده نمی کنید؟

    پاسخ

  • به به سلام رضا جان :) ممنونم :)
    حتما. هروقت که قسمت لینک ها رو آماده کردم، لینکت رو قرار می دم :)
    من رو هم که میتونی با همین نام “یک طراح وب” لینک کنی.

    پاسخ

  • با سلام
    اول از همه دامین جدید رو تبریک می گم و همچنین خوشحالم که از این قالب برای وبلاگ تون استفاده کردید .

    پاسخ

  • سلام
    ممنون از لطفتون. بنده هم خوشحالم که از این قالب که فارسی سازیش رو شما انجام دادید استفاده میکنم :)

    پاسخ

  • سلام
    آقا این jquery رو کجا قرار بدیم ؟
    طرز استفاده از اون چطوریه ؟

    پاسخ

  • توضیح دادم که. باید بین تگ head فراخوانی بشه با استفاده از کدی که قرار دادم.

    پاسخ

  • ممنون خیلی عالی بود
    لینکت کردم
    موفق باشی

    پاسخ

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

    پاسخ

  • خیلی عالی شد. ممنون به خاطر پیگیری :)

    پاسخ

  • باسلام،
    خیلی جالبه!
    من یَک عدد سَوال داشتم!
    چرا کدها راست-به-چپ-َن!؟

    پاسخ

  • غلط کردم.
    سایت فول لود نشده بود! D-:]

    پاسخ

  • سلام
    اول ممنون به خاطر آموزش خوبتون چون خیلی وقته دنبالش می گشتم.
    اما الان اومدم دانلود کنم فایل کتابخانه جی کوئری هیچی داخلش نبود؟!
    اگه امکان داره فایلشو آپ کنید و ادرسشو واسم بفرستید
    ممنون.

    پاسخ

  • سلام علیرضا جان خوبی عزیز لینک شما رو تو سایت گذاشتم امیدوارم بتونیم با هم همکاری داشته باشیم .

    پاسخ

  • آقا شرمنده ولی این تگ Head دقیقا توی کدوم فایله؟

    پاسخ

  • علیرضا جان سلام
    ببخشید میشه این پلاگین رو کاری روش انجام داد تا موقعی که عکس لود میشه بشه اون عکس رو هم ذخیره کرد؟؟؟

    پاسخ

  • سلام
    آقا چطوری چپ به راست کنیم . یعنی جای next و prev عوض بشه ؟

    پاسخ

  • kheili jaleb bod
    mamnun :)

    پاسخ

  • سلام
    آقا من کشتم خودمو
    هرکاری میکنم پلاگین عمل نمیکنه
    جاوا ها را درست بین تگ head گذاشتم و همه چی درسته rel هم درسته
    من قبلا از rokzoom استفاده میکردم چون روی ورژن جدید فابر کار نمیکرد عوضش کردم روی صفحه جدا کار میکنه ها ولی وقتی جاشو با rokzoom عوض کردم دیگه کار نمیکنه!!!!!

    پاسخ

  • سلام.سایتتون عالیه.
    من میخوام این کد رو رو بلاگفا بذارم.نمیشه
    میشه راهنمایی کنید؟

    پاسخ

  • ali bod azatoon kheili mamnoon

    پاسخ

  • سلام. من از lightbox و jscroll همزمان استفاده کردم. اما متاسفانه یکی رو درست انجام نمی ده.
    آیا شما راه حلی برای اینکار دارید؟

    پاسخ

دیدگاه خود را ارسال کنید


می‌توانید از برخی کدهای HTML استفاده نمایید:


<a> <b> <blockquote> <i> <em> <pre> <code> <strong>