Totally Zenned
- Join Date:
- Apr 2010
- Posts:
- 900
- Plugin Contributions:
- 0
JS/CSS thumbnail slider for additional images
Hi All,
I'm trying to add a simple little slider beneath the main product image for additional images.
I found a pretty easy looking slider here:
http://bootsnipp.com/snippets/3kAkz
If you look at the demo, you have to imagine it shrunk down to fit beneath the big prod image.
Here is a link to where I am trying to put it for now (just above "Related Products"):
http://0stage.justmedicalDOTbiz/Product_Test/Product_Test_1_Images
This slider has 3 components: HTML, CSS, JS
I'm totally lost. Can somebody please help me?
Thanks!
++++++++++
HERE IS WHAT I HAVE DONE SO FAR:
I put the JS into a file (/includes/templates/MY_TEMPLATE/jscript/jscript_myCarousel.js):
$(document).ready(function() {
var cantidadDesaparecidos = 15;
var itemsxpagina = 4;
var items = cantidadDesaparecidos / itemsxpagina;
var resto = cantidadDesaparecidos % itemsxpagina;
//alert(items.toFixed(0));
//alert(resto);
for(i = 0; i < items; i++){
//console.log(i);
$("#myfeed").append('<div class="item"><div class="row-fluid" id="'+i+'">');
for(j = 0; j < itemsxpagina; j++){
//console.log(j);
$('#'+i).append('<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>');
}
$("#myfeed").append('</div></div>');
}
if(resto > 0){
$(".carousel-inner").append('<div class="item"><div class="row-fluid" id="resto">');
for(x = 0; x < resto; x++){
$("#resto").append('<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>');
}
$(".carousel-inner").append('</div></div>');
}
$('.item:first').addClass('active');
$('#myCarousel').carousel({
interval: 10000
});
});
Then I inserted the HTML into my prod page file (/includes/templates/MY_TEMPLATE/templates/tpl_product_info_display.php)
<!--bof myCarousel Additional Image Slider -->
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner" id="myfeed">
</div><!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">A</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">B</a>
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<!--eof myCarousel Additional Image Slider -->
Last, I added the CSS to the bottom of my file (/includes/templates/MY_TEMPLATE/css/stylesheet.css)
/* myCarousel additional image slider */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #333333;
}
