Lightbox Gallery Issue

Question

I am hoping someone can help me with this issue ...

I am wanting each of the 6 images to be it's own Gallery, and for the Life of me am Beyond Lost!

Here is the JS code:

$(function(){
    // lightbox image
    $(".lightbox-image").append("<span></span>");

    $(".lightbox-image").hover(function(){
        $(this).find("img").stop().animate({opacity:0.5}, "normal")
    }, function(){
        $(this).find("img").stop().animate({opacity:1}, "normal")
    });
});

Here is the HTML:

    <div class="pad_left1">
          <div class="wrapper pad_bot1">
            <div class="cols"> <a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Company Logos"><img src="images/page3_img1.png" alt=""></a>

              <p><strong class="font1">Company Logos</strong>???enter text here???<br><br>
</p>
            </div>
            <div class="cols pad_left1"> <a href="images/big_img2.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Business Cards"><img src="images/page3_img2.png" alt=""></a>
              <p><strong class="font1">Business Cards</strong>???enter text here???<br>
</p>
            </div>
          </div>
          <div class="wrapper pad_bot1">
            <div class="cols"> <a href="images/big_img3.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Photgraphy/Photo Edits"><img src="images/page3_img3.png" alt=""></a>
              <p><strong class="font1">Photography/Photo Edits</strong>???enter text here???<br><br>
</p>
            </div>
            <div class="cols pad_left1"> <a href="images/big_img4.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Band Logos/Album Covers"><img src="images/page3_img4.png" alt=""></a>
              <p><strong class="font1">Band Logos/Album Covers</strong>???enter text here???<br>
</p>
            </div>
          </div>
          <div class="wrapper pad_bot1">
            <div class="cols"> <a href="images/big_img5.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Random Designs"><img src="images/page3_img5.png" alt=""></a>
              <p><strong class="font1">Random Designs</strong>???enter text here???<br>
</p>
            </div>
            <div class="cols pad_left1"> <a href="images/big_img6.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Websites"><img src="images/page3_img6.png" alt=""></a>
              <p><strong class="font1">Websites</strong>???enter text here???<br>
</p>
            </div>
          </div>
        </div>

Did you try changing `rel="prettyPhoto[group1]"` to something different for each link? — ezakto, May 04 '12 at 18:15

score 0 · Accepted Answer · answered May 04 '12 at 18:21

0

It's simple try to do it this way if you need a set of gallery

<div>
<a href="images/image-1.jpg" rel="prettyPhoto[group1]">image #1</a>
<a href="images/image-2.jpg" rel="prettyPhoto[group1]">image #2</a>
<a href="images/image-3.jpg" rel="prettyPhoto[group1]">image #3</a>
</div>

<div>
<a href="images/image-4.jpg" rel="prettyPhoto[group2]">image #4</a>
<a href="images/image-5.jpg" rel="prettyPhoto[group2]">image #5</a>
<a href="images/image-6.jpg" rel="prettyPhoto[group2]">image #6</a>
</div>

answered May 04 '12 at 18:21

coder

13,002
31
112
214

I didn't get you.you're using correctly but what exactly do you need if you wan to use mall the 6 images as a group then what you are doing is correct.But if you want each image as a gallery whch dosen't make sense.So you have to use as mentioned in my answer that you need to create 2 div's and place images as per your need and give each set of images a group name as grou1,goup2 and so on. – coder May 04 '12 at 18:53
I think I figured it out ... Many thanks! Fairly New to the JavaScript world! :) – sve May 04 '12 at 21:55

Lightbox Gallery Issue

1 Answers1