• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Hosting-new.com

Hébergement web, cloud et solutions personnalisées

  • Home
  • About

Hébergement CPanel sur SSD, offre Cloud

Un hébergement professionnel sur serveur Xeon Gold et SSD

Image Gallery with Jquery Lightbox 3 of 3

May 19, 2012 by Admin 23 Comments

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Host Unlimited Websites For .88 ! bit.ly Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This is part 3 here is the link to part 2: www.youtube.com In this tutorial by James at www.dreamweavertutorial.co.uk we will be installing a custom image gallery with a layered alpha transparent polorioid effect background image. We will create the free image gallery with minimal html and css and then attach the image gallery to the jquery lightbox plugin which will animate a larger image into the center stage of your website. Your website visitors can then click through the images as if they were a slideshow gallery or peruse the images individually. The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial exercise files bit.ly This is a great tutorial for learning how to postion elements and for using image gallery scripts. Follow me on Twitter: www.twitter.com My RSS feed for Dreamweaver Tutorial updates: www.dreamweavertutorial.co.uk

Linux Cpanel shared hosting: 600 GB disk space, 6 TB bandwidth, free domain, unlimited databases and ftp accounts, web hosting cheap and pro at Hostony

Filed Under: Web Hosting Tutorials Tagged With: Gallery, image, jQuery, Lightbox

Reader Interactions

Comments

  1. LRebisch says

    May 19, 2012 at 4:53 am

    Thank you! This helped me understand how to position thumbs and create my own slideshow..I don’t like to just copy and paste code, I like to know what is goin on… so thanks!

    Reply
  2. modelzmoneymurda says

    May 19, 2012 at 5:41 am

    THANK YOU SO FUC#ING MUCH!!!!!!! I’VE BEEN TRYING TO CREATE THIS TYPE OF PHOTO GALLERY FOR MONTHS!!!!!!! DOING ENDLESS GOOGLE SEARCHES AND YOUTUBE SEARCHES FOR TUTORIALS. THANK YOU AGAIN DUDE YOU FUC#ING ROCK!!!!!!!!

    Reply
  3. ChrisBrandsborg says

    May 19, 2012 at 5:59 am

    the html file or the link? because I have no link right now.. I haven’t published it yet! I don’t want to do that before the whole website is finished 🙂 But I can send you the “html” file, with the images in it, and you can see what’s wrong?

    Reply
  4. DreamWeaverTutorial says

    May 19, 2012 at 6:13 am

    No the picture size can be whatever you want it to be within reason. If you have not fixed it then upload your page to the web and ill tell you what the problem is. – James

    Reply
  5. ChrisBrandsborg says

    May 19, 2012 at 6:52 am

    I think maybe I found the problem! Do the large pictures need to be 500 x 300 ? because my pictures are way bigger! ^^

    Reply
  6. ChrisBrandsborg says

    May 19, 2012 at 7:12 am

    Okay, I can try that! Thanks! :)

    Reply
  7. DreamWeaverTutorial says

    May 19, 2012 at 7:23 am

    Hi Chris, go to my website and look for the written tutorial of the same name. There are full code examples for you to copy and paste. Check for errors based on the code on the site

    Reply
  8. ChrisBrandsborg says

    May 19, 2012 at 8:02 am

    Everything worked perfect until the “lightbox-screen” (I copied everything you did, and past it where you did) but when I browse my site, and press an image, it just opens up normal (I don’t have the option to push next or “close” etc… It’s like nothing happened! But everything else worked perfect so thank you! Put if you know what I could have done wrong, please let me know:)

    Reply
  9. MrJoel8881 says

    May 19, 2012 at 8:35 am

    love ur tuts.. but how do you play asf videos coz i have bben trying check on the internet there are no sources.thanks…..

    Reply
  10. D1230CP says

    May 19, 2012 at 9:03 am

    Hey james! I have been viewing your videos for quite a while now! I think they are the best areound youtube! thanx James!

    Reply
  11. keeezz says

    May 19, 2012 at 9:42 am

    If you wanted to use escape key to close the large image, how would you approach that ?
    Thanks in advance

    Reply
  12. DreamWeaverTutorial says

    May 19, 2012 at 10:25 am

    look at the code generated on screen and copy it. its just a path to the images its html already, its not dreamweaver code. Just like if i asked you to find your start up icon for your favourite game like COD4, how would you find the start up icon in your computer? maybe, c drive/users/programfiles/activision/cod4. well its the same with the images.

    Reply
  13. MultiNickky says

    May 19, 2012 at 10:55 am

    Great video but you know when you link the big image with the tumbnail ones right how do you do it in php or html if you are not using DW

    Reply
  14. MrKWonder says

    May 19, 2012 at 11:35 am

    Really neat video thanks a lot! But every thing works smoothly until previewing and opening the lightbox for the first time! i think it is down to the folders i downloaded being inside my own website folders as i was hoping i could use this as a page on a website i am making! if this is right could you try and explain how i can fix this problem in a simple way?! thanks alot

    Reply
  15. DreamWeaverTutorial says

    May 19, 2012 at 11:45 am

    they mate and have a litter of little lightbox galleries but other than that, probably not much else happens.

    Reply
  16. mslisamurai says

    May 19, 2012 at 12:33 pm

    what if you have more than one gallery on the same page?

    Reply
  17. DreamWeaverTutorial says

    May 19, 2012 at 1:06 pm

    hi you can go into the lightbox JS file inside of dreamweaver and click inside of the open file and go to EDIT>FIND AND REPLACE. then type in ‘opacity’ you can adjust the opacity which is currently set to 0.8 and just to the left of that you can set a background color. – James

    Reply
  18. epics7 says

    May 19, 2012 at 1:22 pm

    Good video. Is there a way to display the images without making the background go dark? Example, I have a design made in Fireworks that I want to use. The layout is a white box on a black background. There is a white line towards the bottom that separates the thumbs from the main pictures that will display in the large space. Is this possible using Jquery with the images showing up in the space? Like I can do in Flash.

    Reply
  19. salevukovi says

    May 19, 2012 at 2:16 pm

    AMAZING VIDEO
    U GOT ONE MORE SUBSCRIBER 🙂

    THX MAN

    Reply
  20. Raneosa says

    May 19, 2012 at 2:56 pm

    Thanks alot mate for this USEFUL video, really helped me
    but i have one question , if i have a large image , how can i make it fit to screen when i click the pic ? i mean i dont want the large image to go farther than the browsers window, hope u get it, and thanks again

    Reply
  21. lenegand says

    May 19, 2012 at 3:06 pm

    thnks i will appreciate i am designing the real website in the backround so please that is not the original i am playing around as i have no experience in web site creation i have been studying html online and with different tutorials i am now onto php and mysql. so it will be a while before the real site is up and running. thanks for the comments appreciated .

    Reply
  22. DreamWeaverTutorial says

    May 19, 2012 at 4:01 pm

    Hey, yeah i had a look at your floating menu. looks pretty cool.

    yes you can get them to auto revolve but you will have to set an interval and will need to know a bit of javascript to do that. If i get a chance ill write some code but it wont be for a few weeks. website looks good glad you got the floating menu to work ok and good to see you made some icons for it too.

    James

    Reply
  23. lenegand says

    May 19, 2012 at 4:47 pm

    thamks a lot great tutorials i set up the floating nav bar on my web page i haven’t finishe all the pages yet but you can check it out.. on my web design page in the small thumbnails i have set up a j query light-box/.i am busy doing the light box gallery. is it possible to do the gallery so it plays automatic when you click on a thumbnail. thanks and keep up the tutorials.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CAPTCHA
Refresh

*

Primary Sidebar

Made with love by Hosting-New