PrettyPhoto Thumbnail Gallery Question

LINK-
http://www.tds-exhibits.com/new/

When you click on one of the larger images in the main content area the PrettyPhoto gallery appears. If you roll your mouse over the main image, a smaller thumbnail gallery appears underneath (the thumbnail images are broken which is another problem I will have to fix later). But when you move your mouse OFF of the main image, the thumbnail gallery disappears. Can someone help me decipher how I would disable the “pp_gallery” from disappearing?

Thanks in advance!
Todd

Hi,

.pp_gallery is controlled via javascript so you would need to adjust the script or see if there is an option to have the gallery visible at all time.

You could force the issue with css like so:


.pp_gallery{display:block!important}

However it will still fade off and on for a second when you mouse off the element as the JS kicks in.

I can move this to the JS form if you want.

This works! I see what you mean about it still fading off for a second. How can you move it into the JS? Can you show me?

lol - you misunderstand me (or I wasn’t very clear):slight_smile: I meant move the whole thread into the js forum so a JS expert can look at it :wink:

I’ve moved the thread anyway.

Thanks Paul!

So I have had my thread moved to the JavaScript forum from the CSS forum and I am still baffled.

I am trying to modify the jquery.prettyPhoto.js script so that they “pp_gallery” stays visible instead of fading in and out quickly. Paul OB was able to apply some CSS rules so that it stays visible but it flickers when the user moves their cursor out of the prettyPhoto display area.

In addition, the pp_gallery div appears to be built dynamically from the jquery.prettyPhoto.js file but it is assigning the thumbnails with a relative URL that is pointing incorrectly to the smaller images.

LINK-
http://www.tds-exhibits.com/new/

Looks like you have fixed it?

If so please give a quick run-down of what you did in case others have the same problem :slight_smile:

So here was the fix. In the file named “jquery.prettyPhoto.js”, look for the following string of code:

find(".pp_content").hover(function(){$pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeIn()},function(){$pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeOut()});

and then I had commented out the following:

find(".pp_content").hover(function(){/* $pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeIn()*/},function(){/* $pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeOut()*/});

Well done and thanks for updating the thread :slight_smile: