Search code examples
jqueryanchorcolorboximageektron

Can I use Colorbox on images, when there is no anchor tag

I'm trying to create a slidewhow with Colorbox. Unfortunately, I have no control over how the images are created, so I can't put anchor tags, or rel= on the images.

The best I can do, is something like this:

<div id="cbImg" class="slideshow">
    <img src="file1.png" />    
    <img src="file2.png" />
    <img src="file3.png" />
    <img src="file4.png" />
</div>

The image tags will could have height, width and alt tags... but it's dynamically generated. All I can control is the DIV tag surrounding the images. There may or may not be other tags (p, div, span) surrounding the images.

I want something like this:

<div id="cbImg" class="slideshow">
    <a href="file1.png" rel="slide" class="pop"><img src="file1.png" /></a>
    <a href="file2.png" rel="slide" class="pop"><img src="file2.png" /></a>
    <a href="file3.png" rel="slide" class="pop"><img src="file3.png" /></a>
    <a href="file4.png" rel="slide" class="pop"><img src="file4.png" /></a>
</div>

Yes, this is coming out of a CMS... no, I can't modify how it renders. I'm trying to make a slideshow (if possible).

Solution

  • Basically, I ended up using JQuery to create the anchor tags around the IMG tag dynamically... which then let me add the class and rel= I needed to use the ColorBox option.

    Here is one of the answers I used for tips on how to create the anchor tags:

    jQuery: Easiest way to wrap an image tag with an A anchor tag