ColorBox: How to group one link

MilitaryDonut
MilitaryDonut used Ask the Experts™
on
Hello,

I am trying to use colorbox, and wondering how can I group the photos under one list?

one the example on the website it shows Example 1
Grouped Photo 1
Grouped Photo 2
Grouped Photo 3

Each having a separate link...when you click, the colorbox shows up and has all 3 images...

How can I put all 3 images under 1 link?

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Technical Support
Top Expert 2005
Commented:
Hi!

I'm not sure if this would work, but try the following:


<p><a href="img1.jpg" rel="example1" title="Img 1">Image Set</a></p>
<p style="display:hidden;"><a href="img2.jpg" rel="example1" title="Img 2">Grouped Photo 2</a></p>
<p style="display:hidden;"><a href="img3.jpg" rel="example1" title="Img 3">Grouped Photo 3</a></p>

Open in new window

Author

Commented:
That was right on track...I tried that and well that did not work but this did:

<p><a href="img1.jpg" rel="example1" title="Img 1">Image Set</a></p>
<p style="visibility:hidden;"><a href="img2.jpg" rel="example1" title="Img 2">Grouped Photo 2</a></p>
<p style="visibility:hidden;"><a href="img3.jpg" rel="example1" title="Img 3">Grouped Photo 3</a></p>
Julian MatzTechnical Support
Top Expert 2005

Commented:
That would have been my next suggestion :)

However, I did give the wrong information. Sorry about that. It should have been

<p style="visibility:none;">

"display:hidden" is not a valid property, it should have been "display:none".

Give the display:none a try, and if that doesn't work, you should also be able to apply some more CSS to your method to really hide those paragraphs. Have a look at the code below for some guidance.

Glad I was able to help.
<p><a href="img1.jpg" rel="example1" title="Img 1">Image Set</a></p>
<p class="hide"><a href="img2.jpg" rel="example1" title="Img 2">Grouped Photo 2</a></p>
<p class="hide"><a href="img3.jpg" rel="example1" title="Img 3">Grouped Photo 3</a></p>

CSS
==============================
p.hide {
    visibility: hidden;
    line-height: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

Open in new window

Julian MatzTechnical Support
Top Expert 2005

Commented:
Ok, I don't what's wrong with me! I got the last one wrong too :)


Not "visibility:none", but "display:none" of course!


<p><a href="img1.jpg" rel="example1" title="Img 1">Image Set</a></p>
<p style="display:none;"><a href="img2.jpg" rel="example1" title="Img 2">Grouped Photo 2</a></p>
<p style="display:none;"><a href="img3.jpg" rel="example1" title="Img 3">Grouped Photo 3</a></p>

Open in new window

Author

Commented:
@julianmatz:


Thanks once again...

I used the CSS idea you gave me and added this to my Standard.css for my templates I use.  


Wow!  so much learning I have to do...


Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial