Need an interactive gallery
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am looking to create an interactive gallery similar to this (http://maps.google.com/help/maps/streetview/index.html) where the viewers can flip through various 360 panoramas we have shot.

We'd like to create the interactive element which flips back and forward with the white "Polaroid" type border but leave an empty container to drop html code in it which will load the 360 images. We have html code for various places we have shot which we would like to drop into the gallery. We'd also like the gallery to have some space below to add location details and a small thumbnail of a map. Is it possible to produce this as a .swf or html5 file which we can drop into an existing website?

Are you asking if it is possible? Or do you want example code?
alex 9 years ago
Im asking for the code to be done so we can put it on our site.
jim 9 years ago
Thats a cool demo but me being a total non-coder how can this be implemented on a site? I also didnt notice the 'flip' feature the sample site above has. Additionally, can this be edited to expand the bottom white border to add text and a map thimbnail? Lastly, rather than a jpg file, i have links to the shoots that i have done via an html link. If you visit our website (www.virtualproperti.es) you can see from the top image we were able to get the pano loaded however without the border, bottom text, map thumbnail or 'flip' feature.
jim 9 years ago
@jim do you want to use the Google Panorama or are you fine with another implementation?
alex 9 years ago
I am an independent photographer with Google. I shoot 360 panoramas which get put on their Maps platform. I want to showcase the images I take for them which is why its easier to drop a link to the images on maps inside the gallery.
jim 9 years ago
@jim Try it now.
alex 9 years ago
this is really great alex! just two small comments. 1) is it possible to get the title text to align with the tilted image as it flips 2) is it possible to get the image to flip one direction for 'next' and another for 'previous'?
jim 9 years ago
@jim Is this better?
alex 9 years ago
yes. we are getting very close. the 'previous' image is transition looks good on that side but should flip from back to front. the text aligns great! could we align the paragraph with the titile? could we also add a small thumbnail area to the bottom right (besides the 'next' button). id like to add a small thumbnail of a map for the place we shoot. lastly, is it possible to add social media sharing options? if we can pick that up... i think we have a winner!
jim 9 years ago
just pay close attention to the sample page we posted initially.... we want those same elements
jim 9 years ago
@jim I've managed to clean up the code and fix all the transitions, but I'm still stuck on implementing the G+ icon. Could you take a look now and see what I need to add/change?
alex 9 years ago
@ alex, i like the cleaned up version a lot. im guessing that the interactive map can be replaced with any html code that links to our tours, right? is the kitty thumbnail for the map icon if so, can it be easily resized? the text under the title can be edited with multiple lines?
jim 9 years ago
@jim Yes it can be replaced with any google maps embed link, but try to keep it the same dimensions. Yes, the kitty thumbnail is just a placeholder for a map icon or any other icon you want and it can be resized (download the new version for this). And, again, yes. You can put multiple lines below the title. And sorry, I still can't manage to get any social buttons onto the site, but I'm gonna keep trying.
alex 9 years ago
@alex great! glad we can edit that... id appreciate you trying. it would be great if we can get that last social sharing piece on it. very small detail, could we bring the 'previous' and 'next' buttons below the gallery?
jim 9 years ago
@jim Buttons are now at the bottom of the page.
alex 9 years ago
@jim Google Plus button added. Download link has been updated.
alex 9 years ago
If you want to test the Google Plus button, don't do it locally as Google disables the +1 button for local URLs. This is what kept tripping me up because I kept thinking that it wasn't loading properly.
alex 9 years ago
@alex the buttons seem to be on the white border (over the text and button) could we get it below the white? also, is it possible to have a facebook & twitter share button in addition to the g+ share?
jim 9 years ago
@jim the twitter and facebook buttons have been added.
alex 9 years ago
@alex... i was refering to the 'previous' and 'next' to be placed below the white border. the social buttons are great where they are... could we just have them aligned? if we take care of those 2 things... we should be done!
jim 9 years ago
@jim whoops, my bad. Updated.
alex 9 years ago
@alex... this is it! thats the layout we are looking for. a few glitches i noticed. as I flip through the images, i notice that some of the text on the bottom image is not consistent. i also notice that the facebook sharing buttons are missing in one of them. can we limit the width of the description text to right before the social sharing buttons on the right? that way its consistent.
jim 9 years ago
@jim Should be fixed, anything else you want?
alex 9 years ago
@alex...yes just that glitch i noticed. as I flip through the images with the next button, i notice that the text of the bottom image is changes once the front image goes to the back. example: as the top image is flipping back the bottom image says "middle of nevada". once the top image finishes flipping that same bottom image that used to say "middle of nevada" says "middle of utah". im sure that same glitch will happen once I change the content of the image... can we get that fixed?
jim 9 years ago
@alex.. also, when i like an image with the FB button, a new window pops up which adds scroll bars to the frame. is it possible to have it pop out of the frame like it does when i roll over the g+ button?
jim 9 years ago
@jim, I'm sorry about the FB button, but I believe it's just how facebook does their button. I'm currently working on a fix to the quirky Polaroid stack.
alex 9 years ago
thanks alex.... so if there is no fix for the FB popup.. could changing the location of the social sharing buttons (like the bottom or along the top) fix the issue? we just dont like the look when the scroll bars pop up... makes it look unusual
jim 9 years ago
@ alex... any word on the FB button relocation?
jim 9 years ago
@jim working on it right now.
alex 9 years ago
@jim, check it out now. Is that okay?
alex 9 years ago
@alex... looks great. last comment. there is one frame that remains tilted when we flip through, can we straighten it out. also, can we move the image thumbnail to the other side so that it does not interfere with the text and and reduce the length of the textblock on bottom to about 3/4 of the size of the frame. right now it seems like it runs the whol length of the frame.
jim 9 years ago
@alex... any word?
jim 9 years ago
@jim done. I updated it on the Alternate branch. Anything else?
alex 9 years ago
@alex... I apologize if I wasnt clear. In alternate.. the thumbnail (kitten image) is in a great position. The social media buttons didnt need to change, I think you had that right when they were on top. The only thing that was not picked up was limiting the size of the textbox. Maybe you can clarify this, but the image we will be using will be a bit wider. we are concerned that the text will interfere with the image. Could the texbox width be reduced to about 3/4 of the size of the frame? Other than that everything looks great. Thanks!
jim 9 years ago
@jim how about now?
alex 9 years ago
@alex.. which one am I looking at? original or alternate?
jim 9 years ago
@jim I changed both, but check out the main one first.
alex 9 years ago
@alex... main one looks great... the 'previous' and 'next button seem to cut off at the bottom
jim 9 years ago
@jim Fixed.
alex 9 years ago
@jim, is there anything else I can help you with?
alex 9 years ago
@alex.. you knocked this out of the park man! this is really great! two quick questions: 1) the files you gave me to download.. can they be easily integrated into any website? 2) does the bottom portion of the border (where the text is) resize if there is less text?
jim 9 years ago
@jim, a) yes, just upload the CSS and JS files, link them up(which I believe weebly does this for you) and copy the HTML. b) yes, it will change the height if there is more or less text.
alex 9 years ago
@Jim if you need help with weebly, I can give you a single file you can just copy the contents into a 'custom html' block.
alex 9 years ago
@alex...That would be great! Does it matter if it is being done on Mac or PC?
jim 9 years ago
@Jim, nope. 'cuz I've tested it on both Chrome for Mac and PC.
alex 9 years ago
@jim copy the HTML from this file: http://c.0x60.com/code/2h0o0K2F352F into a custom html block onto Weebly and it should work.
alex 9 years ago
@jim Is there anything else I can help you with?
alex 9 years ago
@jim I took the locations from your gallery and put them into a slideshow for you. Just copy the code from here (http://c.0x60.com/code/1O423Y1h1N3a) to a customHTML block in Weebly and you should get 6 slides in the gallery. Oh, and I couldn't find any images so the kittens are still there.
alex 9 years ago
@alex.. thanks so much! here is the link I made of the gallery once i dropped a custom HTML block and put the code you gave me. A few comments... 1) can the address bar be made a bit larger.... and 2) the "previous" button overlaps the map image.
jim 9 years ago
@jim yes they can, let me do that for you.
alex 9 years ago
@jim here it is: http://c.0x60.com/code/0c121x1G3p0u. I also fixed the positioning so the gallery won't cover the navigation bar
alex 9 years ago
@alex sorry here is the link (http://www.virtualproperti.es/test.html) also... is it possible to drop the gallery so it doesnt interfere with the conent under it?
jim 9 years ago
@alex... thanks so much... looks good but i notice the social buttons are not loading properly. I will be migrating this website to wordpress... it will have a new desing but this will be an element within that new design, so I am guessing the person making the new template will be able to use this code for it....right?
jim 9 years ago
@jim I just noticed that also, here is a fix (http://c.0x60.com/code/0G1E1S350Q01). And yes, he/she will be able to use it inside the template.
alex 9 years ago
i really appreciate your help alex! you really rocked this and I am really impressed. I am new to "bountify" but if you could give me your email, I am sure I could use your help for future projects.... if anything i would love to work with you again on bountify to help get a few things done for our upcoming site
jim 9 years ago
@jim Alright! It was nice working with you. My email is alexanderchang@me.com
alex 9 years ago
@Alex, do you still have the final file for this project? I thought I had downloaded it but now that it is on the website, I still see some of the glitched that you fixed, which leads me to believe I may have downloaded the wrong file. Plus the links from the solution are no longer active. HELP!
jim 9 years ago
@jim, I believe I still do. Let me re-upload them. Sorry for the problems (I changed my URL for my uploads).
alex 9 years ago
@jim, I hope this solution update fixes everything.
alex 9 years ago
@jim Just remove line 2(background: #CCC;) in the (http://www.virtualproperti.es/CA_Gallery/main.css) file.
alex 9 years ago
thanks Alex. I loaded the script on my site, but im coming across it having a thick grey border. (http://www.virtualproperti.es/california/) Is this specified in the html code somewhere? Also.. the 'next' and 'previous' buttons are overlapping the thumbnails on the bottom
jim 9 years ago
@jim, a) The grey border is actually the background color which is specified in the css file. (see above instructions to remove) b) The simple fix to the button problem is to add <p></p> a line above <div id="button-container"> on the second slide.
alex 9 years ago
you da man! Yea i figured out how to change the background color in the css file. and that helped. I notice that the grey border around the iframe (particularly on top) covers portions of the text on the page. is there a simple fix to changing the width of that grey border? i could do a few times to bring it down.. but dont want to have to scroll too much to see the element.
jim 9 years ago
@jim, Yes it is possible to show the text without adding more padding. First you need to change the <iframe style="width: 100%; height: 760px; margin-top: -76px;" src="http://virtualproperti.es/CA_Gallery/index.html" width="320" height="240"></iframe> line to <iframe style="width: 100%; height: 760px; margin-top: -76px;" src="http://virtualproperti.es/CA_Gallery/index.html" width="320" height="240" allowTransparency="true"></iframe> in the (http://www.virtualproperti.es/california/index.html) file.
alex 9 years ago
Next, change line 2 in the (http://www.virtualproperti.es/CA_Gallery/main.css) file to background: transparent;.
alex 9 years ago
thanks dude... you rock!
jim 9 years ago
@jim, no problem :)
alex 9 years ago
awarded to alex

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

You can download the files here and a demo is available here. Enjoy!

Weebly version here. Just copy and paste the code into a custom HTML block in Weebly.

Alternate

The alternate can be downloaded here and a demo is available here. The only difference between the two is that the alternate had the social buttons on the left.

Instructions

  1. Change the URL https://maps.google.com/[...]output=svembed to whatever URL you want the end result to have.
  2. Change the text inside p.text and p.title to fit the description.

Edit(s)

  1. Updated with descriptions and images
  2. I think I got it this time [nope.]
  3. Added different flip direction and changed orientation of text when flipping
  4. Flip looks more realistic and text doesn't go into quirks-mode.
  5. Google Plus button added!
  6. Facebook & Twitter buttons added!
  7. Set <p> width, fixed facebook icon.
  8. Fixed quirky z-index of Polaroids.
  9. Social uttons moved to the top.
  10. [main branch] paragraph is now aligned to the right and is narrower. Image is also larger.
  11. [both] fixed quirky animation.