Results 1 to 10 of 10

Thread: help with polaroid gallery

  1. #1
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default help with polaroid gallery

    Problem: Having trouble getting this script to work properly. It's using an old version of jquery and doesn't work properly with that, so I changed it so that it uses an updated version of jquery and still doesn't work. What is suppose to happen is it scatters the polaroid imgs about in a container and the imgs should be draggable and when clicked should enlarge.

    Link to the site: http://www.rezzurrectiontaxidermy.com

    The js file is jquery-polaroid.js and the css file is polaroid.css

    Let me know if you need more information, and thanks for any help!
    Last edited by jscheuer1; 09-19-2013 at 05:56 AM. Reason: Format

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I am not sure what the problem is.

    1-I was able to view the images and cycle through them using the arrows on each side(left/right) after clicking on an image.
    2-clicking on the image to view the next ones.
    3-I also was able to use the left right arrows on my keyboard to navigate the images.

    I am using ff v23.0.1 and about to upgrade to the next version after doing this post-lol
    Thanks,

    Bud

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Please don't hot link to your site. It will make it so that search results might begin with links to your forum posts here instead of to your site. I've been taking care of this for you in all of your threads I've come across. I may have missed one or more though.

    Instead of using the link tool to insert a link, or writing out the full URL:

    http://www.rezzurrectiontaxidermy.com

    which without special formatting will be automatically converted by the forum to a hot link, simply put:

    rezzurrectiontaxidermy.com

    without the http:// or www. parts. That way it will be able to be pasted into the user's/forum participant's address bar so they can see what you're talking about and hopefully help you. But it will not adversely affect search results on services like Google and Bing.

    You can if you prefer, do:

    [noparse]http://www.rezzurrectiontaxidermy.com[/noparse]

    And it will look like so:

    http://www.rezzurrectiontaxidermy.com

    Making it even easier for forum participants, but still not adversely affect search results.



    That said, I don't see a Polaroid Gallery on that page, I do see a Magnific Popup Gallry and that's working fine.

    There are several or more Poloroid Gallery scripts available on the web. The only one I see that behaves (except for the enlarging part) as you describe is Flash based:

    http://www.no3dfx.com/polaroid/

    There the images are scattered about and you can drag the images around. But the only way to enlarge them is to right click and choose zoom in. That's a native Flash function available for all Flash features unless explicitly disabled.

    There's one for WordPress, but I couldn't find a demo for that (it probably requires WordPress though). And there's one for jQuery:

    http://tympanus.net/codrops/2010/09/...tobar-gallery/

    That one works a little differently but does have the enlarge on click feature. View its demo to see exactly how the thumbnails are arranged, they're not scattered or draggable though. Rather they're arranged in bins at the bottom of the page, click on a bin and that bin's contents opens up across the bottom of the page. It looks a little scattered, but it's not really. Hovering one of them makes it rise a little higher, clicking it enlarges it.

    If you're trying to use a different Poloroid Gallery script, please post a link to its demo page (where you got it from).
    Last edited by jscheuer1; 09-19-2013 at 12:04 PM. Reason: looked at the gallery
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Sorry John, will remember that in the future.

    Bud,
    Go to the menu item "braggin rights" that is where the problem occurs.

    Thanks

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Where's the polaroid script? I see polaroid css but no js.

    I see:

    Code:
    <script type="text/javascript" src="js/fadeslideshow.js">
    <script type="text/javascript" src="js/jquery.polaroid.js">
    
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    Which should be:

    Code:
    <script type="text/javascript" src="js/jquery.polaroid.js"></script>
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    But even when I fix that, js/jquery.polaroid.js is a 404 Not Found.

    Where did you originally get this script?
    Last edited by jscheuer1; 09-19-2013 at 12:24 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Ok, fixed the 404 Not found issue. Here is a link to where I originally got the script: http://www.htmldrive.net/items/show/...SS3-and-jQuery

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    First backup what you have, just in case.

    Then use this updated version of the page:

    polaroid2-h.zip

    And this updated version of the script:

    jquery.polaroid.js

    Notes:
    The polaroid script expects the jQuery UI script to be present, so I added that. It includes easing, so I removed the easing script.

    The polaroid script as written makes a call to Google's file loading functions to load jQuery, but the page doesn't have Google's file loading script on it, and jQuery is already on the page, so I got rid of that part of the polaroid script.

    Even when all of that's taken care of, for some reason the polaroidholder div doesn't seem to want to behave as desired as far as positioning it via its bottom coordinate. So I allow it to be set -575 bottom in css but convert it to a top coord as soon as the page is parsed. Then I manipulate its position from there on out using its top coord, which it seems OK with. I also added a window resize function to take care of changing that top coord if the window is resized and that would bring it into view it - like if it was below the fold, and the window is made taller.

    It also seemed too far to the left, so I set it farther to the right (left: 150px). It still is sometimes a little too far to the left, but since the exact left offset of the images appears to be random, setting its left coord too high would be a mistake, causing it to be too far to the right sometimes. I removed the width 100% because it doesn't seem to need it, and with a ledt coord greater than 0, that could cause a horizontal scrollbar with 100% width.

    Finally (for now), I placed the polaroid script at the end because it didn't seem to load properly otherwise.

    Any questions, just ask.

    Oh, and that polaroid script does not enlarge the images. It just allows you yo drag them around. I doubt it would play well on a mobile/touch device, but it might.
    Last edited by jscheuer1; 09-20-2013 at 04:54 AM. Reason: spelling/English, add details and the Oh, and . . . at the end
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I see you've been back since my last post. I've refined things a bit:

    jquery.polaroid.js

    and for the page:

    polaroid3-h.zip

    This gets the images almost always 100% within the viewable area and overcomes some bugs in the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chadlexmorgan (09-21-2013)

  10. #9
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    That looks great John! I appreciate all the help!!

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    You're welcome. I missed two things though in the script:

    1.) I left in a call to the console that I had put in there for diagnostics. It should be removed to avoid an error in browsers with no console or with the console disabled.

    2.) Although I created a resize event to make sure the polaroid holder div wouldn't appear during window resizing as described in my post about that. I didn't account for what will happen sometimes if the window becomes narrower when resizing it. Which is that some of the polaroid images will be cut off on the right or even entirely off the screen to the right.

    I fixed both of those issues. This time only the script needs updating:

    jquery.polaroid.js
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Content Slider Gallery for video Gallery
    By Aleksandra in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-28-2011, 01:20 AM
  2. Replies: 3
    Last Post: 03-25-2010, 02:00 PM
  3. Problem incorporating Cmotion gallery - gallery won't scroll
    By stakey in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-23-2007, 03:40 PM
  4. CMotion Image Gallery II. More tha 1 gallery in 1 page?
    By bernardo in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-12-2007, 10:21 PM
  5. CMotion Image Gallery script: question on end of gallery message
    By monique in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-02-2007, 02:27 PM

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
  •