Colorbox issue WordPress
- SOLVED
This isn't WordPress specific, but I'll ask it anyway :)
I need the colorbox jquery plugin to open for any linked images. The examples given on the Colorbox site all require a class or rel attribute to make them work:
http://colorpowered.com/colorbox/core/example1/index.html
Please tell me how to make the colorbox work, WITHOUT having to add a class, href or anything else the end-user will need to remember to add.
Answers (3)
Kailey Lampert answers:
<script type="text/javascript">
jQuery(document).ready(function($){
$("a[href$='jpg']").colorbox({ maxHeigh:'95%',opacity:'0.6'});
});
</script>
other parameters are, of course, optional
Ryan Hellyer comments:
Awesome :)
You guys are stunningly quick at this.
David answers:
And just incase you want it to work with more than just jpg's this would add support for .png's and .gif's
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a[href$=.jpg],a[href$=.png],a[href$=.gif]").colorbox({ maxHeigh:'95%',opacity:'0.6'});
});
</script>
Ryan Hellyer comments:
Thanks. I'd already solved that problem, but your solution was slightly more elegant so I've used it :)
Chris Lee answers:
This might not be a good idea. But there are area's where this may fail or become very inconvenient. For example if you start to link photos outside the blog area (not your side bars, etc.) or links from a flickr widget.
So limiting the scope or area to just where you post blogs may be a good idea!
thus expand kailey's selector to something like this:
<script type="text/javascript">
// Remember to use only no-conflict mode for wordpress
jQuery(document).ready(function(){
// Replace #blog with whatever the id or class of your blog area may be
jQuery("#blog a[href$='jpg']").colorbox({ maxHeigh:'95%',opacity:'0.6'});
});
</script>
Ryan Hellyer comments:
Nice idea, but for my particular situation, I don't actually know what HTML will be on the pages.