SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Todd Temple > T2 Design

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .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.

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    .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?
    Todd Temple > T2 Design

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    How can you move it into the JS? Can you show me?
    lol - you misunderstand me (or I wasn't very clear) I meant move the whole thread into the js forum so a JS expert can look at it

    I've moved the thread anyway.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!
    Todd Temple > T2 Design

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/
    Todd Temple > T2 Design

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So here was the fix. In the file named "jquery.prettyPhoto.js", look for the following string of code:
    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:
    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()*/});
    Todd Temple > T2 Design

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well done and thanks for updating the thread


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •