help with polaroid gallery

[chadlexmorgan]

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!

[ajfmrf]

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

[jscheuer1]

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).

[chadlexmorgan]

Sorry John, will remember that in the future.

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

Thanks

[jscheuer1]

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

I see:

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

<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?

[chadlexmorgan]

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

[jscheuer1]

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.

[jscheuer1]

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.

[chadlexmorgan]

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

[jscheuer1]

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