Adding

thumb.click(function() {
window.location = $(this).attr(‘longdesc’);
});

To the OnThumb function grabs the longdesc attribute and directs the page to the URL you specify, but it simply redirects. There has to be a way to get this link to call the slimbox instead, maybe with a different function – can anyone help?

I wanted to see if you or anyone else could help me out with what bakkelun was trying to do: when clicking on a certain thumbnail, I want to open the slimbox instead of in the galleria (only for certain images). I tried your technique, but like you said, the underlying code seems to override the link around the thumbnail.

I am not an expert in Java but I know this is where the code needs to change, and I have added a longdesc reference here:

// add the rel attribute

_thumb.attr(‘rel’,_src);

//add the long desc

_thumb.attr(‘longdesc’,_longdesc);

// add the title attribute
_thumb.attr(‘title’,_title);

// add the click functionality to the _thumb
_thumb.click(function() {
$.galleria.activate(_src);
});

I cannot figure out what to put underneath the _thumb.click function — it would make sense to create an If longdesc exists statement, then link to the slimbox rel; if not do what galleria normally does.

Any thoughts?

First duplicate all your images in a hidden DIV and give them all the same class:

In the galleria onImage function add that class to the clicked image:

image.addClass(‘image_group’);

Then call slimbox on that image with a linkMapper that pulls the src of the image for the larger display, and a linkFilter that filters out the duplicate images — you will have a dupe because the one you clicked on is also in the hidden DIV.

$(‘.image_group’).slimbox({loop: true},
function(el) {return [el.src, el.title];},
function(el) {return (this == el) || (this.src != el.src);});

If you are linking to larger images, then you’ll have to wrap the clicked image in A tags like Janine shows and then set up your hidden DIV images in the same way. You won’t need the linkMapper (second argument) then, but you will have to change the linkFilter (3rd arg) to compare hrefs instead of srcs.

I say it’s working.. but I haven’t tested it in all browsers yet.

image.wrap(‘<a href=”‘ + image.attr(‘src’) + ‘” rel=”nofollow”></a>’);
image.addClass(‘my_group_of_images’);
$(‘.my_group_of_images’).slimbox();

This probably is a lot better than my other method. Since they are hidden, there is no worries about the click functionality applied to them.

Another note: since I only use 1 image for all the levels, I really don’t need to wrap a tags on anything. The a tag is just always used in lightboxes to specify the bigger src in the href, and I am using the big images everywhere as the src so I don’t need it in an href. So you can easily change slimbox’s functionality by passing it a link mapping function to grab the src of the image, instead of the href of the A.. then you don’t need a tags and you can target the images instead.

for a single image:
image.slimbox({loop: true}, function(el) {return [el.src, el.title];});

or with my yet to be tested example:
image.addClass(‘my_group_of_images’);
$(‘.my_group_of_images’).slimbox({loop: true}, function(el) {return [el.src, el.title];});

In the above case, you wouldn’t have to add links around any of the image group images in the hidden div.

Also, one other helpful hack (I think) that I made to galleria was to add display:none to the unstyled UL class (.gallery_unstyled) so that the images don’t show briefly while galleria loads. Then you have to go into the galleria core and remove this class after the thumbs are made.. Line 220 in version 1.0. is where the thumb-making loop ends. Add this code:

$(this).removeClass(‘gallery_unstyled’);

Trying to remove the class with jquery in the doc didn’t work for me.. and because it has precedence over the other classes added to the UL via galleria, it makes the newly created thumbs invisible if it is not removed.

Thanks for posting the initial post Janine, it really helped a lot. Just one little thing makes a difference!