I'm building some website with image gallery.
There is a normal colorbox start up script
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
It starts when I press on hyperlink covering img tag.
But I also have some img tags, without hyperlinks fitting them. And in that way default power up script is not working.
But I have different one which works partially .
$('.colorbox').click(function() {
$(this).colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current},
$s_total[$lid]: {to开发者_运维问答tal}', maxWidth: 960,
maxHeight: 640, scalePhotos: true,
href: $(this).attr('src')});
});
This one powers up both img tags inside hyperlinks and img tags without hyperlinks. And now the problem. In this way there are no arrows and info about prev, next image, and number of total images.
Is there any way out of my problem ?
Again I repeat, I have 2 types of pictures in my database.
- img tags put into hyperlinks ( default colorbox way )
- img tags without hyperlinks but with a colorbox class ( strange way )
Any way to combine these 2 types under one powering up normal working script ?
You should be able to do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
$('img.colorbox').colorbox({href:function(){return $(this).src; }});
You could also do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5', current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}', href:
function(){
return this.src || this.href;
}});
... how about this:
1 - group ALL images by some class selector
2 - use the onLoad callback to check for and set the href value for images that are not wrapped by a hyperlink
精彩评论