Shutter reloaded for Next-Gen gallery -- smaller images and the title from alt attribute

Sorry if this question is out of the place, but I didn't find any information about it at other places on the net... :-(

So, I have a Shutter-box javascript Lightbox, that I need to modify.

The Shutterbox script is here (already customised a bit): http://pastebin.com/g5qTF86H

The page where it is used: http://www.mrsherskin开发者_开发技巧.com/collections/subconscious-levitation

1). By default this script doesn't take the alt of the images it takes for lightboxing, just the title attribute of it. I would like to set up a variable in this script to put the image's alt attribute as a title above the picture. I would use this jQuery script for it inserted in the showImg initialisation, but I don't know how could I set up a variable that inserts this alt tag read from the respective images:

var ImgTitle = jQuery('<div id="img-title"><h1 class="entry-title">Alt title</h1></div>');
jQuery(ImgTitle).appendTo('#shWrap');

2.) I would like to accommodate the size of the shown image so that 2-3 lines of description text could fit under it. Unfortunately I didn't find the part of the script that calculates the size of the lightboxed image, where to change it?

Any help please? Thank you in advance.

Thanks so much for the answer about how to get the image alt attribute, it worked perfectly for me! I was a little confused about where to put the code that you provided, so in case any one else had the same issue I hope I can help clarify.

Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}

Change that line to the following:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Directly above that line you just changed, add the following:

ALT = jQuery(L).children('img').attr('alt');

I then found the following line:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

And changed it to this:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

Hope this helps!

-RG

OK, I found the solutions:

(1) I fetched the alt of the images under shutterbox rel-links by this jQuery method:

ALT = jQuery(L).children('img').attr('alt');

Added it to the shutterLinks object:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Then inserted this variable in a new jQuery object, under the make function:

var ImgTitle = jQuery('<div id="img-title"><h1>' + shutterLinks[ln].alt + '</h1></div>');
jQuery(ImgTitle).prependTo('#shWrap');

(2) I found the part which scales down the large images (if image size is bigger than viewport size), and added to the end a shrink by 30 px

TI.style.width = (TI.width - 30) + 'px'; // add side padding
TI.style.height = (TI.height - 30) + 'px'; // add bottom padding

Update suggested by Rachel:

To put this code, follow these steps:

Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}

Change that line to the following:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Directly above that line you just changed, add the following:

ALT = jQuery(L).children('img').attr('alt');

Then find the following line:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

And change it to this:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';