All Articles Dreamweaver
ایجاد سبد گالری تصویر از jQuery در Dreamweaver
Geoff Blake on Sat, June 18th 9 comments
You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

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


مرحله 1

اول ، مطمئن شوید و دانلود فایل های پروژه ای برای این آموزش است. زیپ لباس را باز کردن فایل و ذخیره سازی فایل های پروژه را در یک محل است که شما به یاد داشته باشید ، مانند روی کامپیوتر خود ببینید. در داخل پوشه فایل های پروژه شما 2 ادامه پوشه ها ، "دارایی" و "تصاویر" پیدا کنید. آنها حاوی تمام اجزای ما لازم است.


مرحله 2

در حال حاضر ، به پیش رو و راه اندازی Dreamweaver را انتخاب کنید و سایت


مرحله 3

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

این کد شامل لینک های جاوا اسکریپت خارجی و فایل های CSS که ما نیاز ، و همچنین برخی از قابلیت های اضافی است. مطمئن باشید که برای ذخیره فایل خود را به پوشه ای به شما به عنوان یک سایت در بالا تعریف شده.


مرحله 4

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

همانطور که می بینید ، بیرونی "lightboxgallery" وجود دارد


مرحله 5

در حال حاضر ما نیاز به ریز عکسها به ما. قطره اشاره گر خود را به اولین ریز


مرحله 6

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

بیش از تلنگر به طراحی مشاهده ریز اول ، گرافیک را انتخاب کنید ، سپس بر روی بازرس خواص کلیک کنید 'مرور فایل' (آیکون پوشه در کنار زمینه پیوند). هدایت به تصویر مربوطه در اندازه کامل در "تصاویر" پوشه. در این مورد ، "fullsize1.jpg." تکرار این برای هر ریز و ارتباط هر یک به اندازه همتای خود را کامل.


مرحله 7

ما در نهایت آماده برای تست چیزهایی از! فایل خود را ذخیره و سپس فایل را انتخاب کنید

اتمام این

ایجاد گالری تصاویر سبد فایل های پروژه

Comments (9)

You must be logged in to comment.

  • Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
    • 7 years ago
    • By:
    Reply
  • Rounik Admin
    Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
    • 7 years ago
    • By:
  • Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
    • 7 years ago
    • By:
    Reply
  • Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
    • 7 years ago
    • By:
    Reply
  • wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
    • 6 years ago
    • By:
    Reply
  • azex
    hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
    • 6 years ago
    • By: azex
    Reply
  • Ian
    Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
    • 6 years ago
    • By: Ian
    Reply
  • Emily
    Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
    • 6 years ago
    • By: Emily
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: