[Plugin: jQuery Colorbox] Using Colorbox to open image links

Hi,

Colorbox itself works for every link (even iFrames or videos), as you can see on the Colorpowered Website. (left hand side, demonstration links)

I wrote the plugin in a way that limits the Colorbox functionality to thumbnails only.
If there are more people who want this feature, I could try to find a solution in one of the next updates.

Best regards,
Arne

vegidio,

Not sure if I understand exactly what you’re trying to accomplish, but if you’re hoping to colorbox an image via a text link (no thumbnail), this worked for me:

<a href="/example.jpg"><img src="/example.jpg" alt="" title="Example" width="0" height="0" class="alignnone size-full wp-image-53285 colorbox-manual" />This is a test</a>.

The key here was to set the width and height to zero. The resulting colorbox-ed image displayed at its full size. Setting the alignment to none ensured no unexpected breaks in the surrounding text.

Anyway, if this was what you were aiming for, hope this helps.

I was hoping to just be able to add the colorbox-manual class in a normal href, but it didn’t activate the colorbox. Maybe this is possible and I just missed something.

Cheers.

techotronic, I would REALLY like your plugin to allow me to add it to image links as well. I have people add image links in comments and I’d like them to open in Colorbox. I have a plugin called link-indication where I can add any class to any link, so I could add the class “colorbox-manual” to all image links, but your plugin doesn’t recognize those links. If it did that would be amazing!

Another colorbox plugin called Lightbox Plus DOES recognize these class links in the comments, but I prefer your plugin as yours hides flash, and works really well.

So I am putting in my vote for your plugin to recognize the class colorbox-manual in all links in the site, including in the comments.

Thanks!

I would also add my vote for this feature request.

Thanks

Hi,
I just implemented the opening of links in an iframe.
You’ll have to install the current development version 3.6.5:
https://downloads.www.ads-software.com/plugin/jquery-colorbox.zip

It works this way:
– All links that have the CSS class “colorbox-link” are opened in a Colorbox.
You can add the class to any link in the “insert/edit link” dialog, just select “colorbox-link” in the class-dropdown menu.

– The Colorbox needs to have a height and width set in the settings since I can’t determine the size necessary programatically. (Otherwise, the colorbox will be 0 by 0 pixels big)
Unfortunately, the value is used site-wide for every Colorbox.
Maybe I’ll have to add separate values for the width and height but that would mean that all translators would have to change their translations…

Please let me know if it works as you expected.
Also: I rewrote a bit of the plugin, so there may be bugs. Please report them.

Cheers,
Arne

Hi again,
I’d like to release an updated version sometime soon and I haven’t received any feedback ??
Did anybody test the development version and the new feature?
Cheers,
Arne

Hi, I’m using colorbox in a new wordpress site I’m building and it’s working fine except for one thing.

In my portfolio pages I have thumbnails that expand into colorboxes and work fine, but the permalinks to each actual post (the post title and the ‘Read more..’ links) open the relevant post as an iframe in a colorbox. Obviously this is not the desired effect, I need them to link through to the post normally.

The structure for this from the template file is below:

<div class="portfolio-item-wrapper">

                	<div class="portfolio-item">

                    	<a class="thumbnail" href="<?php echo $thumbnail[0]; ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('template-p'); ?></a>

                        <br class="clearer" />

                	</div>

                </div>

                <div class="portfolio-item-wrapper right-most">

                	<div class="portfolio-item">

                    	<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

                        <br />

                        <?php the_excerpt(); ?>

                        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">Read More &raquo;</a>

                        <br class="clearer" />

                	</div>

                </div>

Hi,
only the current development version can open contents in an iframe, and then only if a link has the CSS class “colorbox-link”.
Could you link to the page you are having problems with?
Cheers,
Arne

The site is still in development and I don’t want to put the link up just yet. Could you email me ([email protected]) and I’ll reply with the link.

Thanks

Don’t know if this helps but, as far as I can make out, there’s an if statement in the ‘jquery.colorbox-min.js’ file that gives certain links the “cboxElement” class under a certain condition.

The links carry this class and I can’t figure out how to fix it. I’m fairly useless with Java and don’t want to alter the code in case I stop the thumbnail images from loading in a colorbox as well.

The java is below:

if(a.rel!=="nofollow"){g= c(".cboxElement").filter(function(){return(c(this).data(q).rel||this.rel)===a.rel});

Haha, ignore this. I’ve fixed it. Thanks anyway dude.

If anyone else has the same problem, there is a workaround below…

In ‘jquery.colorbox-min.js’, edit the line:
c(this).data(q,f).addClass("cboxElement");

so it looks like:
c(this).data(q,f).addClass(" ");

and in your theme template, manually change the class of your thumbnail or image to include the “cboxElement” class.

For me, the edit was like so…

From:
<a class="thumbnail" href="<?php echo $thumbnail[0]; ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('template-p'); ?></a>

To:
<a class="thumbnail cboxElement" href="<?php echo $thumbnail[0]; ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('template-p'); ?></a>

Cheers

Hi techotronic,
I have tested the development version of your plugin, but only for text links leading to images. Everything works just fine, and I am more than grateful for adding this feature!

Thanks for a great plugin!

P.

I have got this working using the width=”0″ and height=”0″ hack. I have a single thumbnail that starts a gallery up of 20 images.

Initial thumbnail in the page content

<a href="<?=get_bloginfo('siteurl');?>/images/photo1.jpg" title="image caption here">
<img src="<?=get_bloginfo('siteurl');?>/images/photo1_thumb.jpg" alt="Click for Gallery" border="0" class="colorbox-1" />
</a>

For each additional photo (i put them right before the </body> tag.

<a href="<?=get_bloginfo('siteurl');?>/images/photo2.jpg" title="image caption here"><img src="<?=get_bloginfo('siteurl');?>/images/photo2.jpg" width="0" height="0" class="colorbox-1" /></a>

Important Follow Up

It it not neccessary to have the links to the additional photos wrapped around the actual image you are linking to. Doing this will actually load every image in the background on pageload. Not good!

Instead, just use a single 1 pixel spacer .gif image.

<a href="<?=get_bloginfo('siteurl');?>/images/photo2.jpg" title="image caption here"><img src="<?=get_bloginfo('siteurl');?>/images/spacer.gif" width="1" height="1" class="colorbox-1" border="0" /></a>

Thanks Arne!

Using your latest developmental build has been a great help with the ability to call colorbox for external html. But is there a way to set a custom height and width for external html? If not, could this feature be added into the next build?

It would be extremely helpful to be able to leave the default setting for images but customize the size of the html links.

Much thanks for all your hard work thus far though! This plug-in is awesome!