Help with fancybox or Shadowbox galleries

Discussion in 'Web Design and Development' started by djsound, Nov 2, 2010.

  1. djsound macrumors 6502a


    Dec 4, 2006
    I am trying to update my site with 4 different 'slideshow' galleries...I do design work so I want 4 thumbnails on one page. 1 - Print, 2- Web Design, 3 - Logo Design and 4 - Misc Artwork. Each with a thumbnail to represent it. Then I would like to be able to click on each one to open up a corresponding Shadowbox Gallery (or similar). The print thumbnail would open up about 8 'print' examples etc.......anyone know how to do this? You don't have to explain the whole thing but maybe just help me get started in the right direction... thanks! :D

    edit - i found something similar. At the top of this page it says Image Set. I would like something like that but not have to show all 4 thumbnails on the main page...
  2. Wee Beastie macrumors regular

    Aug 20, 2007
    In the snow with Rosebud
  3. brisbaneguy29 macrumors 6502


    Nov 27, 2007
    If I understand you correctly, you want to have a slideshow run a series of 8 images but only show 1 thumbnail, not all 8?

    To do this I use Lightbox, but I am sure Shadowbox would work the same way. All you need to do is set the first image, in the case below the image I have used is called print_thumb.jpg and when clicked it opens up the large image print_1.jpg

    You can then code in the other images for the slide show, but just don't supply an image or text source. The example below will have a print thumb, and when clicked you will get a slide show of print_1.jpg then print_2.jpg, then print_3.jpg etc......

    <a href="images/print_1.jpg" rel="lightbox[print]" title="Print Portfolio Example 1"><img src="images/print_thumb.jpg" alt="Print Portfolio" width="130" height="130" border="0" id="image" /></a>
    <a href="images/print_2.jpg" rel="lightbox[print]" title="Print Portfolio Example 2"></a>
    <a href="images/print_3.jpg" rel="lightbox[print]" title="Print Portfolio Example 3"></a>
    <a href="images/print_4.jpg" rel="lightbox[print]" title="Print Portfolio Example 4"></a>
    Is this what you were after, or did I miss understand you completely??
  4. djsound thread starter macrumors 6502a


    Dec 4, 2006
    Brisbane your right on. Thank you very much for taking the time to help =)

    I'll try right when I get home
  5. djsound, Dec 21, 2010
    Last edited: Dec 21, 2010

    djsound thread starter macrumors 6502a


    Dec 4, 2006
    It worked but for some reason it opens on image 5 of 5 instead of 1 of 5 and I can only go to 'previous' image...instead of next

Share This Page