Polaroid Image Gallery

  • 2
  • Article
  • Updated 3 years ago
  • (Edited)
Live Preview:


http://preview.risevision.com/Viewer.html?type=presentation&id=5136acd9-356e-4f97-a5f1-e75c5a214b8d&showui=false

For those users who may be looking for something different other than conventional image slideshows, here is a polaroid image slider we have provided for the community. You can also add captions to each slide a-la-t-swift-1989. We will be using the HTML widget for our presentation.

Simply enter the following code in between the tags in the HTML widget configuration:

https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet" type="text/css" />


.slider {
display:block;
position:relative;
margin: 50px auto;
width:100%;
max-width:600px;
max-height:800px;
overflow:hidden;
border: 11px solid #d3d3d3;
margin: 0 auto;
border: 25px solid #ffffff;
border-bottom-width: 60px;
transition: 3s box-shadow ease-in;
box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);


}
.polaroid-container {
position:relative;
left:0;
-webkit-transition:left 0.3s;
-moz-transition:left 0.3s;
-ms-transition:left 0.3s;
transition:left 0.3s;
animation: slider 16s infinite;
}
.polaroid-images {
width:400%;
}
@keyframes slider {
20%{left: 0%;}
25%,45%{left:-100%;}
50%,70%{left:-200%;}
75%,95%{left:-300%;}
}
.caption {
clear:left;
position:relative;
font-family: 'permanent marker';
display:block;
font-color: #000000;
font-size: 40px;
}
.image-wrapper {
background-color:white;
display:block;
float: left;
overflow: hidden;
width:25%;
}
.image-wrapper img {
width:100%;
}




https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/12....;

Your caption goes here!




https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/2.j...;

...and another caption




https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/3.j...;

and another!




https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/8.j...;

RiseVision.com




Edit each caption as you see fit.

If you wish to change the size of your polaroid, adjust the pixel dimensions of max-width and max-height under .slider within the style tag.

If you’d like to pull images from your storage folder to save time, have a look at our web component repo here.

If you’d like to add cool vintage-looking polaroid effects to your images, take a look at this awesome tutorial!

Have fun with it. If you choose to use this item, we would love to see your presentations posted to this thread.

If you have any comments or questions, please comment below and a team member will be happy to assist.
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Jeffrey See

Jeffrey See

  • 316 Points 250 badge 2x thumb
So...I can get my images in and get them to scroll, but no permanent marker and two weird broken image links below my image.
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Hi there,

Thanks!

It appears you are missing a closing tag for your last image:

 <div class="image-wrapper">            <img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/8.j...;
            <div class="caption">
                RiseVision.com
            </div>
        </div>


You will need to attach the correct url and make sure you have an ending bracket '>' like your other photos.

Let me know if this works! Otherwise, I will manually fix your code for you so you don't need to spend your time editing code. :)
Photo of Jeffrey See

Jeffrey See

  • 316 Points 250 badge 2x thumb
Hmmm....I just closed it, but only the first image plays and the permanent marker writing does not show on any of the images.
Photo of Jeffrey See

Jeffrey See

  • 316 Points 250 badge 2x thumb
BY the way, the last two tags in the code are red. NOt sure if that is also throwing things off.

Photo of Jeffrey See

Jeffrey See

  • 316 Points 250 badge 2x thumb
OK...all code is good, BUT...the permanent marker caption at bottom of polaroid container will not show up. Ideas?
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Hi Jeffrey,

Apologies for the late response.
To get your captions to show, set: max-height:1000px; rather than 800px (under .slider). The images you are working with have a larger height, which is why the captions weren't showing. :)