Skip to content

Instantly share code, notes, and snippets.

@JonCrawford

JonCrawford/product_showcase.css

Created June 27, 2011 01:26
Show Gist options
  • Save JonCrawford/1048169 to your computer and use it in GitHub Desktop.
Save JonCrawford/1048169 to your computer and use it in GitHub Desktop.
Download ZIP
Storenvy Product Showcase Slider - This code is provided as-is and is not supported by Storenvy.
Raw
product_showcase.css
/* Add this CSS to your store Styles section under CSS mode */
/* http://www.storenvy.com/ */
/* Photo Slider */
.product_photo_slider {
background: #fff; /*: Product Slider Background :*/
border: 5px solid #eaeaea; /*: Product Slider Border :*/
color: #555; /*: Product Slider Product Description :*/
display: block;
margin-left:8px;
overflow: hidden;
position: relative;
width: 651px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 20px #ccc;
-moz-box-shadow: inset 0 0 20px #ccc;
-webkit-box-shadow: inset 0 0 20px #ccc;
}
.product_photo_slider .slide_inner {
margin-left: 80px;
position: relative;
width: 530px;
z-index: 5;
}
.product_photo_slider ul {
width: 9999em;
}
.product_photo_slider li {
float: left;
overflow: hidden;
position: relative;
padding: 20px;
width: 628px;
}
.product_photo_slider .product_photo_slider_bg {
bottom: -100px;
height: 200%;
left: 0;
position: absolute;
z-index: 0;
width: 100%;
}
.product_photo_slider dl {
float: left;
margin-left: 20px;
width: 260px;
}
.product_photo_slider dt {
color: #333; /*: Product Slider Product Name :*/
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.product_photo_slider dt p {
padding-bottom: 0;
}
.product_photo_slider dd {
font-size: 11px;
line-height: 18px;
padding-top: 10px;
}
.product_photo_slider .product_slider_price {
color: #000; /*: Product Slider Price Color :*/
font-size: 36px;
font-weight: normal;
margin: 10px 0;
}
.product_photo_slider img {
float: left;
}
.product_photo_slider .slider_controls {
background-color: #ccc; /*: Product Slider Controls Background :*/
color: #a3a3a3; /*: Product Slider Controls Color :*/
cursor: pointer;
font-size: 28px;
padding: 5px 0;
text-align: center;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.product_photo_slider .slider_controls span {
margin-right: 2px;
}
.product_photo_slider .slider_controls_current {
color: #333; /*: Product Slider Controls Current Color :*/
}
.product_photo_slider form {
margin-top: 10px;
}
.product_photo_slider select {
display: block;
margin-bottom: 7px;
}
.slider_add_to_cart {
background: -webkit-gradient(linear, left top, left bottom, from(#f8bb3d), to(#f89804));
background: -moz-linear-gradient(top, #f8bb3d, #f89804);
background: -o-linear-gradient(top, #f8bb3d, #f89804);
background-color: #f89804;
border: 1px solid #c57816;
color: #4e3227;
cursor: pointer;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: .01em;
overflow: visible;
padding: 7px 18px;
text-align: center;
text-shadow: rgba(255, 255, 255, .3) 0 1px 0;
text-transform: uppercase;
width: auto;
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
}
.slider_add_to_cart:active {
box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
}
.clear {
clear: both;
}
Raw
product_showcase.js
// INCLUDE THIS JAVASCRIPT IN YOUR LAYOUT'S <head> TAG INSIDE A <script> TAG OR
// CREATE AND HOST A SEPARATE JAVASCRIPT FILE AND INCLUDE IT IN THE PAGE
// REQUIRES JQUERY
// http://www.storenvy.com
//
// <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
//<script type="text/javascript">
(function () {
// Plugin requires jQuery
//var $ = jQuery.noConflict():
jQuery(function () {
var
/**
* STUFF YOU CAN CHANGE
*/
// Time between slides in milliseconds
delay = 3000, // 3000 / 1000 = 3 seconds,
// Sliding animation speed
speed = 300,
// Specify the html contents of your slider controls
controlContent = '&bull;',
/**
* !!STUFF YOU SHOULDN'T CHANGE!!
*/
// Timer object placeholder
timer,
// The slider list element
slider = jQuery('.product_photo_slider ul'),
// The slider controls element
controls = jQuery('.slider_controls'),
// Classname for the slider controls
controlCurrent = 'slider_controls_current',
// Cache all the slides within the slider
slides = slider.find('li'),
// Cache the slides total
total = slides.length,
// How wide is a slide?
slideWidth = slides.first().outerWidth(),
// Keep track of which slide we are on currently
currentSlide = 1
;
// Initiate our first slide action
timer = _delaySlide();
// Create the controls at the bottom
function _createControls() {
for (var i = 0, l = total; i < l; i++) {
var control = jQuery('<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
// Make sure clicks on a control send the slider to the right slide
control.bind('click', function (e) {
var el = jQuery(this);
controls.find('.' + controlCurrent).removeClass(controlCurrent);
el.addClass(controlCurrent);
_slide(el.attr('data-storenvy-for'));
return false;
});
controls.append(control);
}
};
// Move the slider left or right
function _slide(exact) {
var distance, to;
// If we've specified an exact slide to go to, use that instead of the current slide.
to = exact || currentSlide;
// How far are we sliding, in pixels
distance = (to * slideWidth) + 'px';
// We are going to a specific slide
if (exact !== undefined) {
currentSlide = exact;
_animate('-' + distance);
return true;
}
// Looks like we are at the end of the list, we should go back to the start.
if (currentSlide === total) {
distance = '0';
currentSlide = 0;
} else {
// We want to slide left, so we have to use negative values
distance = '-' + distance;
}
_animate(distance);
};
// Animate the slider movement
function _animate(distance) {
controls.find('.' + controlCurrent).removeClass(controlCurrent);
controls.find('[data-storenvy-for="' + currentSlide +'"]').addClass(controlCurrent);
// Animate the slider, increment the current slide, and set a timer
slider.animate({ 'margin-left' : distance }, speed, function () {
currentSlide++;
timer = _delaySlide();
});
};
// Delay our sliding actions
function _delaySlide() {
clearTimeout(timer);
return setTimeout(function () {
_slide();
}, delay);
};
function _createBackgroundImages() {
slides.each(function () {
var el = jQuery(this), img = el.find('img'), src = img.attr('src');
var bg = new Image();
bg.src = src;
bg = jQuery(bg).addClass('product_photo_slider_bg');
el.append(bg.fadeTo(0, .2));
});
};
function _setupSlider() {
_createControls();
_createBackgroundImages();
};
_setupSlider();
// Pause sliding on hover and resume on hover off
slides.hover(function () {
clearTimeout(timer);
}, function () {
timer = _delaySlide();
});
});
})();
// </script>
Raw
product_showcase.liquid
<!-- http://www.storenvy.com/ -->
<!-- Insert this into your Home page where you want the slider to appear. -->
<div class="product_photo_slider">
<ul>
{% for product in products.current limit:6 %}
<li>
<div class="slide_inner">
<img src="{{product.image.medium_url}}" alt="{{product.name | h}}">
<dl>
<dt>
<p><strong>{{product.name}}</strong></p>
<p class="product_slider_price">$<strong>{{product.price | money}}</strong></p>
</dt>
<dd>
{{product.description | truncate:140}}
<a href="{{product.url}}">Read More</a>
<form action="http://www.storenvy.com/cart" method="post">
{% if product.variants_in_stock.size > 1 %}
<select name="variant_id">
<option value="" selected="selected">Please select...</option>
{% for variant in product.variants_in_stock %}
<option value="{{ variant.id }}">{{ variant.name }}</option>
{% endfor %}
</select>
{% else %}
<input type="hidden" name="variant_id" value="{{ product.variants_in_stock.first.id }}" name="variant_id" />
{% endif %}
<input type="submit" name="submit" value="Add to Cart" class="slider_add_to_cart">
</form>
</dd>
</dl>
<div class="clear"></div>
</div>
</li>
{% endfor %}
</ul>
<div class="slider_controls"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment