asked on

ColorBox: How to group one link

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?

ASKER CERTIFIED SOLUTION

Julian Matz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MilitaryDonut

ASKER

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

<a href="img1.jpg" rel="example1" title="Img 1">Image Set</a>
<a href="img2.jpg" rel="example1" title="Img 2">Grouped Photo 2</a>
<a href="img3.jpg" rel="example1" title="Img 3">Grouped Photo 3</a>

Julian Matz

That would have been my next suggestion :)

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



"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 Matz

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

MilitaryDonut

ASKER

@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...