WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: jQuery Colorbox] Using Colorbox to open image links (28 posts)

  1. vegidio
    Member
    Posted 4 years ago #

    Hi,

    Thanks for the plugin, it's great. It's working fine on my blog when I try to open NexGen galleries or any embedded image with a thumbnail, like this:

    <a href="http://img504.imageshack.us/img504/8638/chatroulette.jpg" onclick="javascript:pageTracker._trackPageview('/http://img504.imageshack.us/img504/8638/chatroulette.jpg');"><img class="aligncenter colorbox-2703" title="Chatroulette pode ser cruel" src="http://img504.imageshack.us/img504/8638/chatroulette.jpg" alt="Chatroulette pode ser cruel" width="550" height="366" /></a>

    But if I try to open a image link directly, without any thumbnail, Colorbox doesn't work; Example:

    <a href="http://img504.imageshack.us/img504/8638/chatroulette.jpg" onclick="javascript:pageTracker._trackPageview('/http://img504.imageshack.us/img504/8638/chatroulette.jpg');">Link</a>

    Any idea how I can make image links without thumbnails work with Colorbox?

    Thanks.

    http://wordpress.org/extend/plugins/jquery-colorbox/

  2. techotronic
    Member
    Posted 3 years ago #

    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

  3. cliquenoir
    Member
    Posted 3 years ago #

    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.

  4. hotforwords
    Member
    Posted 3 years ago #

    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!

  5. whale74
    Member
    Posted 3 years ago #

    I would also add my vote for this feature request.

    Thanks

  6. techotronic
    Member
    Posted 3 years ago #

    Hi,
    I just implemented the opening of links in an iframe.
    You'll have to install the current development version 3.6.5:
    http://downloads.wordpress.org/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

  7. techotronic
    Member
    Posted 3 years ago #

    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

  8. lewisdonovan
    Member
    Posted 3 years ago #

    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>
  9. techotronic
    Member
    Posted 3 years ago #

    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

  10. lewisdonovan
    Member
    Posted 3 years ago #

    The site is still in development and I don't want to put the link up just yet. Could you email me (lewisdonovan@gmail.com) and I'll reply with the link.

    Thanks

  11. lewisdonovan
    Member
    Posted 3 years ago #

    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});

  12. lewisdonovan
    Member
    Posted 3 years ago #

    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

  13. pgrzyb
    Member
    Posted 3 years ago #

    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.

  14. jaredstenquist
    Member
    Posted 3 years ago #

    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>
  15. jaredstenquist
    Member
    Posted 3 years ago #

    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>
  16. blue_halo
    Member
    Posted 3 years ago #

    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!

  17. phill84
    Member
    Posted 3 years ago #

    tested with opening iframe in colorbox and it works perfectly
    however having colorbox height and width set for whole site is kinda annoying, it would be much better if settings for link in iframe are seperated. Thanks for the great work!

  18. techotronic
    Member
    Posted 3 years ago #

    Hi,
    setting a different size for the colorbox for links will be possible in version 4.0. I'll probably release 4.0 in January.
    Cheers,
    Arne

  19. markgraveline
    Member
    Posted 3 years ago #

    Thank you for your work Arne! I look forward to version 4.0

  20. techotronic
    Member
    Posted 3 years ago #

    Hi,
    setting different sizes is now possible with the current development version:
    http://downloads.wordpress.org/plugin/jquery-colorbox.zip
    Cheers,
    Arne

  21. markgraveline
    Member
    Posted 3 years ago #

    I just tested it out briefly, and it worked perfectly! I'm using it to display videos from Vimeo that open from a thumbnail. Thank you for a great plugin!

    Thanks,
    Mark

  22. Danijel
    Member
    Posted 3 years ago #

    Thanks for great plug in and for this new feature of setting w & h for content that's not images.

    I understand this will sound a bit "newbie" but I would appriciate if someone could add some code that shows how to use this new feature w&h for opening other stuff than pics in color box.

    Thanks!
    /Daniel

  23. techotronic
    Member
    Posted 3 years ago #

    Hi,
    you don't need any code to get this working.
    I described how to use the new feature here:
    http://www.techotronic.de/plugins/jquery-colorbox/opening-links-colorbox/

    Cheers,
    Arne

  24. ACvanRijn
    Member
    Posted 3 years ago #

    Awesome job on updating the plugin techotronic! Do you have any idea when we can start using 4.0? I would really love to be able to set the size of the window for linked content.

    Thanks in advance!

  25. techotronic
    Member
    Posted 3 years ago #

    Hi,
    you can start right now with the current development version:

    http://downloads.wordpress.org/plugin/jquery-colorbox.zip

    I really should release soon, every other week, somebody suggests something, I change things, then I have to test again... A never ending circle ;-)

    Cheers,
    Arne

  26. rockmouseman
    Member
    Posted 3 years ago #

    Sweet - that last updates was hella helpful.
    Funny thing, though. The content I'm loading into the iframe has some Flash in it. What's weird is the music works on it, but it's just not visually there. What's weirder is that if I click on it, it appears.

    This is an incomplete 'private' page, links says "Illumination Graphics Flash Web Site": http://rockmousedays.com/here/?p=1016

    Cheers,
    John

  27. techotronic
    Member
    Posted 3 years ago #

    Hi,
    the page works for me, when I click on the link, the colorbox opens and the flash website is loaded.
    Cheers,
    Arne

  28. rockmouseman
    Member
    Posted 3 years ago #

    Yeah - I moved the page to a subfolder and it seemed to work better for some reason.

Topic Closed

This topic has been closed to new replies.

About this Topic