Multi-images component, refactoring medias functions
This commit is contained in:
Ludovic CANDELLIER
184
build/js/plugins/smooth_products/css/smoothproducts.css
Normal file
184
build/js/plugins/smooth_products/css/smoothproducts.css
Normal file
@@ -0,0 +1,184 @@
|
||||
/* Needed for the lightbox */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* CSS for the loading div */
|
||||
|
||||
.sp-loading {
|
||||
text-align: center;
|
||||
max-width: 270px;
|
||||
padding: 15px;
|
||||
border: 5px solid #eee;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Element wrapper */
|
||||
|
||||
.sp-wrap {
|
||||
display: none;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
background: #eee;
|
||||
border: 5px solid #eee;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
margin: 0 25px 15px 0;
|
||||
float: left;
|
||||
/**************
|
||||
Set max-width to your thumbnail width
|
||||
***************/
|
||||
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
/* Thumbnails */
|
||||
|
||||
.sp-thumbs {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
.sp-thumbs img {
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
max-width: 50px;
|
||||
}
|
||||
.sp-thumbs a:link, .sp-thumbs a:visited {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
opacity: .3;
|
||||
display: inline-block;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
-webkit-transition: all .2s ease-out;
|
||||
-moz-transition: all .2s ease-out;
|
||||
-ms-transition: all .2s ease-out;
|
||||
-o-transition: all .2s ease-out;
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
.sp-thumbs a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Styles for the currently selected thumbnail */
|
||||
|
||||
.sp-thumbs a:active, .sp-current {
|
||||
opacity: 1!important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Image currently being viewed */
|
||||
|
||||
.sp-large {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-large a img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.sp-large a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Panning Zoomed Image */
|
||||
|
||||
.sp-zoom {
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
display: none;
|
||||
}
|
||||
/* Lightbox */
|
||||
|
||||
.sp-lightbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, .9);
|
||||
z-index: 500;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sp-lightbox img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
#sp-prev, #sp-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
z-index: 501;
|
||||
color: #fff;
|
||||
padding: 14px;
|
||||
text-decoration: none;
|
||||
background: #000;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
transition: .2s;
|
||||
-webkit-transition: .2s;
|
||||
-moz-transition: .2s;
|
||||
-ms-transition: .2s;
|
||||
-o-transition: .2s;
|
||||
}
|
||||
#sp-prev {
|
||||
left: 10px;
|
||||
}
|
||||
#sp-prev:before {
|
||||
content: '';
|
||||
border: 7px solid transparent;
|
||||
border-right: 15px solid #fff;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 7px;
|
||||
}
|
||||
#sp-next {
|
||||
right: 10px;
|
||||
}
|
||||
#sp-next:before {
|
||||
content: '';
|
||||
border: 7px solid transparent;
|
||||
border-left: 15px solid white;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 18px;
|
||||
}
|
||||
#sp-prev:hover, #sp-next:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/* Tweak styles for small viewports */
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.sp-wrap {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
#sp-prev, #sp-next {
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
bottom: 25px;
|
||||
}
|
||||
}
|
||||
274
build/js/plugins/smooth_products/js/smoothproducts.js
Normal file
274
build/js/plugins/smooth_products/js/smoothproducts.js
Normal file
@@ -0,0 +1,274 @@
|
||||
/*
|
||||
* Smoothproducts version 2.0.2
|
||||
* http://kthornbloom.com/smoothproducts.php
|
||||
*
|
||||
* Copyright 2013, Kevin Thornbloom
|
||||
* Free to use and abuse under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.extend({
|
||||
deleteSmoothProducts: function () {
|
||||
$(document.body).off('click', '.sp-lightbox');
|
||||
$(document.body).off('click', '#sp-prev');
|
||||
$(document.body).off('click', '#sp-next');
|
||||
$(document.body).off('click', '.sp-large a');
|
||||
$(document.body).off('click', '.sp-noff-touch .sp-zoom');
|
||||
$(document.body).off('click', '.sp-tb-active a');
|
||||
$(document.body).off('click', '.sp-thumbs');
|
||||
},
|
||||
smoothproducts: function() {
|
||||
|
||||
// Add some markup & set some CSS
|
||||
|
||||
$('.sp-loading').hide();
|
||||
$('.sp-wrap').each(function() {
|
||||
$(this).addClass('sp-touch');
|
||||
var thumbQty = $('a', this).length;
|
||||
|
||||
// If more than one image
|
||||
if (thumbQty > 1) {
|
||||
var firstLarge,firstThumb,
|
||||
defaultImage = $('a.sp-default', this)[0]?true:false;
|
||||
$(this).append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');
|
||||
$('a', this).each(function(index) {
|
||||
var thumb = $('img', this).attr('src'),
|
||||
large = $(this).attr('href'),
|
||||
classes = '';
|
||||
//set default image
|
||||
if((index === 0 && !defaultImage) || $(this).hasClass('sp-default')){
|
||||
classes = ' class="sp-current"';
|
||||
firstLarge = large;
|
||||
firstThumb = $('img', this)[0].src;
|
||||
}
|
||||
$(this).parents('.sp-wrap').find('.sp-thumbs').append('<a href="' + large + '" style="background-image:url(' + thumb + ')"'+classes+'></a>');
|
||||
$(this).remove();
|
||||
});
|
||||
$('.sp-large', this).append('<a href="' + firstLarge + '" class="sp-current-big"><img src="' + firstThumb + '" alt="" /></a>');
|
||||
$('.sp-wrap').css('display', 'inline-block');
|
||||
// If only one image
|
||||
} else {
|
||||
$(this).append('<div class="sp-large"></div>');
|
||||
$('a', this).appendTo($('.sp-large', this)).addClass('.sp-current-big');
|
||||
$('.sp-wrap').css('display', 'inline-block');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Prevent clicking while things are happening
|
||||
$(document.body).on('click', '.sp-thumbs', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// Is this a touch screen or not?
|
||||
$(document.body).on('mouseover', function(event) {
|
||||
$('.sp-wrap').removeClass('sp-touch').addClass('sp-non-touch');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$(document.body).on('touchstart', function() {
|
||||
$('.sp-wrap').removeClass('sp-non-touch').addClass('sp-touch');
|
||||
});
|
||||
|
||||
// Clicking a thumbnail
|
||||
$(document.body).on('click', '.sp-tb-active a', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
$(this).parent().find('.sp-current').removeClass();
|
||||
$(this).addClass('sp-current');
|
||||
$(this).parents('.sp-wrap').find('.sp-thumbs').removeClass('sp-tb-active');
|
||||
$(this).parents('.sp-wrap').find('.sp-zoom').remove();
|
||||
|
||||
var currentHeight = $(this).parents('.sp-wrap').find('.sp-large').height(),
|
||||
currentWidth = $(this).parents('.sp-wrap').find('.sp-large').width();
|
||||
$(this).parents('.sp-wrap').find('.sp-large').css({
|
||||
overflow: 'hidden',
|
||||
height: currentHeight + 'px',
|
||||
width: currentWidth + 'px'
|
||||
});
|
||||
|
||||
$(this).addClass('sp-current').parents('.sp-wrap').find('.sp-large a').remove();
|
||||
|
||||
var nextLarge = $(this).parent().find('.sp-current').attr('href'),
|
||||
nextThumb = get_url_from_background($(this).parent().find('.sp-current').css('backgroundImage'));
|
||||
|
||||
$(this).parents('.sp-wrap').find('.sp-large').html('<a href="' + nextLarge + '" class="sp-current-big"><img src="' + nextThumb + '"/></a>');
|
||||
$(this).parents('.sp-wrap').find('.sp-large').hide().fadeIn(250, function() {
|
||||
|
||||
var autoHeight = $(this).parents('.sp-wrap').find('.sp-large img').height();
|
||||
|
||||
$(this).parents('.sp-wrap').find('.sp-large').animate({
|
||||
height: autoHeight
|
||||
}, 'fast', function() {
|
||||
$('.sp-large').css({
|
||||
height: 'auto',
|
||||
width: 'auto'
|
||||
});
|
||||
});
|
||||
|
||||
$(this).parents('.sp-wrap').find('.sp-thumbs').addClass('sp-tb-active');
|
||||
});
|
||||
});
|
||||
|
||||
// Zoom In non-touch
|
||||
$(document.body).on('mouseenter', '.sp-non-touch .sp-large', function(event) {
|
||||
var largeUrl = $('a', this).attr('href');
|
||||
$(this).append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
|
||||
$(this).find('.sp-zoom').fadeIn(250);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Zoom Out non-touch
|
||||
$(document.body).on('mouseleave', '.sp-non-touch .sp-large', function(event) {
|
||||
$(this).find('.sp-zoom').fadeOut(250, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Open in Lightbox non-touch
|
||||
$(document.body).on('click', '.sp-non-touch .sp-zoom', function(event) {
|
||||
var currentImg = $(this).html(),
|
||||
thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
|
||||
currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
|
||||
$(this).parents('.sp-wrap').addClass('sp-selected');
|
||||
$('body').append("<div class='sp-lightbox' data-currenteq='"+currentThumb+"'>" + currentImg + "</div>");
|
||||
|
||||
if(thumbAmt > 1){
|
||||
$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
|
||||
if(currentThumb == 1) {
|
||||
$('#sp-prev').css('opacity','.1');
|
||||
} else if (currentThumb == thumbAmt){
|
||||
$('#sp-next').css('opacity','.1');
|
||||
}
|
||||
}
|
||||
$('.sp-lightbox').fadeIn();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Open in Lightbox touch
|
||||
$(document.body).on('click', '.sp-large a', function(event) {
|
||||
var currentImg = $(this).attr('href'),
|
||||
thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
|
||||
currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
|
||||
|
||||
$(this).parents('.sp-wrap').addClass('sp-selected');
|
||||
$('body').append('<div class="sp-lightbox" data-currenteq="'+currentThumb+'"><img src="' + currentImg + '"/></div>');
|
||||
|
||||
if(thumbAmt > 1){
|
||||
$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
|
||||
if(currentThumb == 1) {
|
||||
$('#sp-prev').css('opacity','.1');
|
||||
} else if (currentThumb == thumbAmt){
|
||||
$('#sp-next').css('opacity','.1');
|
||||
}
|
||||
}
|
||||
$('.sp-lightbox').fadeIn();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Pagination Forward
|
||||
$(document.body).on('click', '#sp-next', function(event) {
|
||||
event.stopPropagation();
|
||||
var currentEq = $('.sp-lightbox').data('currenteq'),
|
||||
totalItems = $('.sp-selected .sp-thumbs a').length;
|
||||
|
||||
if(currentEq >= totalItems) {
|
||||
} else {
|
||||
var nextEq = currentEq + 1,
|
||||
newImg = $('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').attr('href'),
|
||||
newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').css('backgroundImage'));
|
||||
if (currentEq == (totalItems - 1)) {
|
||||
$('#sp-next').css('opacity','.1');
|
||||
}
|
||||
$('#sp-prev').css('opacity','1');
|
||||
$('.sp-selected .sp-current').removeClass();
|
||||
$('.sp-selected .sp-thumbs a:eq('+currentEq+')').addClass('sp-current');
|
||||
$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
|
||||
$('.sp-lightbox img').fadeOut(250, function() {
|
||||
$(this).remove();
|
||||
$('.sp-lightbox').data('currenteq',nextEq).append('<img src="'+newImg+'"/>');
|
||||
$('.sp-lightbox img').hide().fadeIn(250);
|
||||
});
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Pagination Backward
|
||||
$(document.body).on('click', '#sp-prev', function(event) {
|
||||
|
||||
event.stopPropagation();
|
||||
var currentEq = $('.sp-lightbox').data('currenteq'),
|
||||
currentEq = currentEq - 1;
|
||||
if(currentEq <= 0) {
|
||||
} else {
|
||||
if (currentEq == 1) {
|
||||
$('#sp-prev').css('opacity','.1');
|
||||
}
|
||||
var nextEq = currentEq - 1,
|
||||
newImg = $('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').attr('href'),
|
||||
newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').css('backgroundImage'));
|
||||
$('#sp-next').css('opacity','1');
|
||||
$('.sp-selected .sp-current').removeClass();
|
||||
$('.sp-selected .sp-thumbs a:eq('+nextEq+')').addClass('sp-current');
|
||||
$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
|
||||
$('.sp-lightbox img').fadeOut(250, function() {
|
||||
$(this).remove();
|
||||
$('.sp-lightbox').data('currenteq',currentEq).append('<img src="'+newImg+'"/>');
|
||||
$('.sp-lightbox img').hide().fadeIn(250);
|
||||
});
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// Close Lightbox
|
||||
$(document.body).on('click', '.sp-lightbox', function() {
|
||||
closeModal();
|
||||
});
|
||||
|
||||
// Close on Esc
|
||||
$(document).keydown(function(e) {
|
||||
if (e.keyCode == 27) {
|
||||
closeModal();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
function closeModal (){
|
||||
$('.sp-selected').removeClass('sp-selected');
|
||||
$('.sp-lightbox').fadeOut(function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Panning zoomed image (non-touch)
|
||||
|
||||
$('.sp-large').mousemove(function(e) {
|
||||
var viewWidth = $(this).width(),
|
||||
viewHeight = $(this).height(),
|
||||
viewOffset = $(this).offset(),
|
||||
largeWidth = $(this).find('.sp-zoom').width(),
|
||||
largeHeight = $(this).find('.sp-zoom').height(),
|
||||
relativeXPosition = (e.pageX - viewOffset.left),
|
||||
relativeYPosition = (e.pageY - viewOffset.top),
|
||||
moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
|
||||
moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
|
||||
|
||||
$(this).find('.sp-zoom').css({
|
||||
left: moveX,
|
||||
top: moveY
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function get_url_from_background(bg){
|
||||
return bg.match(/url\([\"\']{0,1}(.+)[\"\']{0,1}\)+/i)[1];
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
1
build/js/plugins/smooth_products/js/smoothproducts.min.js
vendored
Normal file
1
build/js/plugins/smooth_products/js/smoothproducts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9140
build/js/theme.js
9140
build/js/theme.js
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user