دانلود پلاگین LightBox حرفه ای جی کوئری + آموزش کامل و ساده
حتما تابحال به این مشکل برخورده اید که پس از کلیک بر روی عکس های گالری و یا مکان های دیگر , عکس در صفحه ای جدید باز شده و طبیعتا کل دیزاین شمارو در طراحی سایت بهم میزند .
این پلاگین به شما کمک میکند که از این خراب کاری جلوگیری کرده و عکس های شمارو با افکتی بسیار زیبا و در همان صفحه ( مانند سایت فیسبوک و همچنین خود سایت اسکریپت دات کام ) نمایش دهد .
ویژگیهای این پلاگین :
نمایش در تمامی مرورگرها
دارای افکت های زیبا و حرفه ای
امکان درج شرح مختصر ر زیر هر عکس
امکان گروه بندی عکس ها برای نمایش پشت سر هم ( اسلاید شو )
و اما آموزش :
ابتدا فایل های مربوط به پلاگین را از اینجا دانلود کنید و در روت سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )
نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .
حال در بالای صفحه و یا صفحات خود , کد زیر را در بین دو تگ <head> و <head/> قرار دهید .
<link rel="stylesheet" href="css/lightbox.css" media="screen"/> <script src="js/modernizr.custom.js"></script>
پس از این کار , کدهای زیر را در 2 خط مانده به آخر , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .
<script src="js/jquery-1.10.2.min.js"></script> <script src="js/lightbox-2.6.min.js"></script>
حال کافیست که عکس های خود را به شیوه ی زیر کدنویسی کنید ( یعنی فرمت زیر را دارا باشند )
<a href="آدرس عکس بزرگ" data-lightbox="vahid-majidi" title="شرح کوتاهی در مورد عکس"><img src="آدرس عکس کوچک"/></a>
توضیحات :
1 – داشتن 2 اندازه بزرگ و کوچک برای یک عکس به این دلیل است که هنگام بارگذاری صفحات سایت شما , ابتدا عکس کوچک و حجم کم بارگذاری شود و پس از کلیک بر روی عکس , عکس بزرگتر که دارای حجم بیشتری هست بارگذاری شود .
ضمنا میتوانید هر دو آدرس رو یکی قرار دهید . یعنی در هر دو صورت , یک عکس بارگذاری شود که مسلما روش بالا بهتر است .
2 – با نوشتن شرح کوتاه در اتربیوت title , میتوانید در زیر هر عکس , شرحی در مورد همان عکس را به نمایش بگذارید .
3 – گاهی میخواهید با کلیک بر روی یک عکس , عکس های دیگری که در همان گروه تصویری هستند را به صورت اسلاید شو , به کاربران نشان دهید . کافیست در اتربیوت data-lightbox , یک نام به دلخواه انتخاب نمایید و برای دیگر عکس های همان گروه تصویری هم , همان نام را تکرار کنید . به همین سادگی چند عکس را در یک گروه تصویری برای اسلاید شو قرار میدهید .
به عنوان مثال :
<a href="img/demopage/image-1.jpg" data-lightbox="vahid" title="عکس شماره یک"><img src="img/demopage/thumb-1.jpg" width="150" height="150"/></a> <a href="img/demopage/image-2.jpg" data-lightbox="vahid" title="عکس شماره دو"><img src="img/demopage/thumb-2.jpg" width="150" height="150"/></a> <a href="img/demopage/image-3.jpg" data-lightbox="majidi" title="عکس شماره سه"><img src="img/demopage/thumb-3.jpg" width="150" height="150"/></a> <a href="img/demopage/image-4.jpg" data-lightbox="majidi" title="عکس شماره چهار"><img src="img/demopage/thumb-4.jpg" width="150" height="150"/></a>
همان طور که در بالا میبینید , دو عکس اول در یک گروه و دو عکس دوم در یک گروه دیگر قرار گرفتند …
آموزش : وحید مجیدی
پخش اختصاصی
دانلود نمونه پلاگین به صورت آماده
[sdm-download id=”1059″ fancy=”0″]
سلام
آقا خیلی عالیه ممنون ، فقط من امتحان کردم دقیقا طبق روشتون اما عکس ها توی یک صفحه جدید باز میشه میاد کنار بالا سمت چپ و اون حالت گرافیکی عکس رو هم نداره انگار یک لینک ساده از عکسه.
مشکل کجاست؟؟؟؟
با تشکر فراوان
با سلام لطفا یک لینک دمو توی فروم بزارید تا بررسی کنم
سلام
من این کارا رو داخل ی صفحه ای به غیر روت انجام میدم ولی عمل نمیکنه.
آدرس دهی هاشم درست میکنم.
با سلام
میتونید دمو بفرستید
کاری که شما گفتید رو برای نشان دادن گالری به صورت اسلاید شو انجام دادم اما عمل نکرد.لطفا راهنمایی بفرمایید
لطفا دمو بزارید
یعنی کدهای html را اینجا بگذارم؟
خیر منظورم دموی آنلاین هست
مثلا آدرس سایت رو بدین
عالی بود. ممنون
سلام
میخواستم در رابطه با این پست سوالی بپرسم
چجوری میشه فاصله عکس را هنگام نمایش از بالا و پایین ابعاد جدید داد
با تشکر
به نام خدا
به نظر بنده جای آموزش zurbo foundation خالیه
می شه بگید که آموزشش رو قرار می دید یا نه؟
فریم ورک بسیار قوی و خوبیه , اما من به شخصه bootstrap رو میپسندم .
فکر نکنم در مورد این فریم ورک آموزشی قرار بدم اما انشاالله تو برنامه هام bootstrap هست …
واقعا آموزشی تمیزی بود.
ممنون(:
سلام
یه دنیا ممنون خیلی قشنگ و کامل توضیح دادین
واقعا ممنونم.