Polar Gallery
by
Piotr Sałaciak (psalaciak 2012)
Polar Gallery
Stand-alone example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sapien vel purus pharetra iaculis. Etiam vitae odio tellus, at condimentum lectus. Suspendisse luctus porttitor elementum. Mauris semper lacinia elit, ac elementum tellus dignissim quis. Sed non scelerisque ante. Phasellus quis risus elit, sit amet scelerisque lectus. Ut porttitor scelerisque est, gravida tempus nulla egestas vel. Nulla gravida hendrerit magna, a sagittis libero elementum id. Vestibulum at nisl vel nibh aliquam pellentesque. Nullam non dignissim ante. Vivamus mattis, sapien ac molestie porttitor, quam dolor imperdiet augue, eget auctor dui tortor ullamcorper libero. Integer eget nulla ac mi laoreet elementum. Morbi congue justo nec purus cursus blandit. Vestibulum commodo nunc in magna varius lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sapien vel purus pharetra iaculis. Etiam vitae odio tellus, at condimentum lectus. Suspendisse luctus porttitor elementum. Mauris semper lacinia elit, ac elementum tellus dignissim quis. Sed non scelerisque ante. Phasellus quis risus elit, sit amet scelerisque lectus. Ut porttitor scelerisque est, gravida tempus nulla egestas vel. Nulla gravida hendrerit magna, a sagittis libero elementum id. Vestibulum at nisl vel nibh aliquam pellentesque. Nullam non dignissim ante. Vivamus mattis, sapien ac molestie porttitor, quam dolor imperdiet augue, eget auctor dui tortor ullamcorper libero. Integer eget nulla ac mi laoreet elementum. Morbi congue justo nec purus cursus blandit. Vestibulum commodo nunc in magna varius lacinia.
<img id="ski-jump"
src="http://0.s3.envato.com/files/22616630/366.jpg"
data-rotate="-10"
data-title="Ski Jumping"
data-subtitle="by Zumazan"/>
<script type="text/javascript">
$("#ski-jump").polarGallery();
</script>
Overlapping photos example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sapien vel purus pharetra iaculis. Etiam vitae odio tellus, at condimentum lectus. Suspendisse luctus porttitor elementum. Mauris semper lacinia elit, ac elementum tellus dignissim quis. Sed non scelerisque ante. Phasellus quis risus elit, sit amet scelerisque lectus. Ut porttitor scelerisque est, gravida tempus nulla egestas vel. Nulla gravida hendrerit magna, a sagittis libero elementum id. Vestibulum at nisl vel nibh aliquam pellentesque. Nullam non dignissim ante. Vivamus mattis, sapien ac molestie porttitor, quam dolor imperdiet augue, eget auctor dui tortor ullamcorper libero. Integer eget nulla ac mi laoreet elementum. Morbi congue justo nec purus cursus blandit. Vestibulum commodo nunc in magna varius lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sapien vel purus pharetra iaculis. Etiam vitae odio tellus, at condimentum lectus. Suspendisse luctus porttitor elementum. Mauris semper lacinia elit, ac elementum tellus dignissim quis. Sed non scelerisque ante. Phasellus quis risus elit, sit amet scelerisque lectus. Ut porttitor scelerisque est, gravida tempus nulla egestas vel. Nulla gravida hendrerit magna, a sagittis libero elementum id. Vestibulum at nisl vel nibh aliquam pellentesque. Nullam non dignissim ante. Vivamus mattis, sapien ac molestie porttitor, quam dolor imperdiet augue, eget auctor dui tortor ullamcorper libero. Integer eget nulla ac mi laoreet elementum. Morbi congue justo nec purus cursus blandit. Vestibulum commodo nunc in magna varius lacinia.
<img id="ski-jump-2" src="http://2.s3.envato.com/files/19872711/204216_Skiing-m.jpg"
data-rotate="3"
data-wrapperWidth="70"
data-title="Detail of the ski slope with a marking stick under blue sky with clouds."
data-subtitle="by sbotas"/>
<img id="ski-jump-3" src="http://1.s3.envato.com/files/25099158/ski%207.jpg"
data-rotate="-10"
data-wrapperWidth="50"
data-title="Ski slope in a high mountain range"
data-subtitle="by Gudella"/>
<img id="ski-jump-4" src="http://0.s3.envato.com/files/22616630/366.jpg"
data-rotate="10"
data-wrapperWidth="270"
data-title="Ski Jumping"
data-subtitle="by Zumazan"/>
<script type="text/javascript">
$("#ski-jump-2, #ski-jump-3, #ski-jump-4").polarGallery({
maxRotation: 20,
wrapperHeight: 270
});
</script>
Thumbnail size example
<img id="ski-jump-5" src="http://2.s3.envato.com/files/19872711/204216_Skiing-m.jpg"
data-thumbnailWidth="300"
data-thumbnailHeight="300"
data-wrapperWidth="330"
data-wrapperHeight="330"
data-title="Detail of the ski slope with a marking stick under blue sky."
data-subtitle="by sbotas"/>
<img id="ski-jump-6" src="http://1.s3.envato.com/files/25099158/ski%207.jpg"
data-thumbnailWidth="200"
data-thumbnailHeight="200"
data-wrapperWidth="220"
data-wrapperHeight="220"
data-title="Ski slope in a high mountain range"
data-subtitle="by Gudella"/>
<img id="ski-jump-7" src="http://0.s3.envato.com/files/22616630/366.jpg"
data-thumbnailWidth="100"
data-thumbnailHeight="100"
data-wrapperWidth="120"
data-wrapperHeight="120"
data-title="Ski Jumping"
data-subtitle="by Zumazan"/>
<script type="text/javascript">
$("#ski-jump-5, #ski-jump-6, #ski-jump-7").polarGallery({
maxScale : 3,
showNavigation : false
});
</script>
Various appearance example
<img id="ski-jump-8" src="http://2.s3.envato.com/files/26524142/PICT4064_Ski_resort.jpg"
data-rotate="5"
data-title="Ski resort. Caucasus Mountains, Dombay."
data-subtitle="by BSANI"/>
<img id="ski-jump-9" src="http://2.s3.envato.com/files/26524142/PICT4064_Ski_resort.jpg"
data-rotate="5"
data-subtitle="by BSANI"/>
<img id="ski-jump-10" src="http://2.s3.envato.com/files/26524142/PICT4064_Ski_resort.jpg"
data-rotate="5"
data-title="Ski resort. Caucasus Mountains, Dombay."/>
<img id="ski-jump-11" src="http://2.s3.envato.com/files/26524142/PICT4064_Ski_resort.jpg"
data-rotate="5"/>
<script type="text/javascript">
$("#ski-jump-8, #ski-jump-9, #ski-jump-10, #ski-jump-11").polarGallery({
wrapperWidth : 300,
wrapperHeight : 250
});
</script>
Polar Gallerypsalaciak 2012
If You have any question or need some help with integration, feel free to contact me. I'll do my best to assist You.
Please, take a look at
my portfolio, maybe You would find something useful there.
Piotr Sałaciak