JS/CSS thumbnail slider for additional images

[Feznizzle]

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.justmedical***DOT***bi..._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;
}

[kobra]

Try moving the jscript file to includes/modules/pages/product_info/
Then check your view source

I tried your link and in the source I could not find "myCarousel Additional Image Slider"

[Feznizzle]

Try moving the jscript file to includes/modules/pages/product_info/
Then check your view source

I tried your link and in the source I could not find "myCarousel Additional Image Slider"

Something happened! It's wonky... but it's there! Yaaaaahoooo!

[Feznizzle]

To simplify this thing and get it working, I placed css and js into their own files and a separate index.html to call the others. But still couldn't get it to work, even as a standalone!

I will zip and attach in case anybody wants to play with it: slider.zip

I'm going to go back to the page where I got it (http://bootsnipp.com/snippets/3kAkz) and view source there for comparison.

[rbarbour]

Not to point out the obvious but you will also need to download bootstrap, which mean you'll be loading the entire bootstrap CSS file for one slider.

Try this, I recommend this for a responsive slider.

slick, the last carousel you'll ever need

To simplify this thing and get it working, I placed css and js into their own files and a separate index.html to call the others. But still couldn't get it to work, even as a standalone!

I will zip and attach in case anybody wants to play with it: slider.zip

I'm going to go back to the page where I got it (http://bootsnipp.com/snippets/3kAkz) and view source there for comparison.

[Feznizzle]

Awesome! Giving it a go right now...

[Feznizzle]

Man, I am dumb. I couldn't get Slick to work either. I followed directions, best I could. *sigh*

I was trying to use Multiple Items (second demo down). I dropped the Slick folder into the folder with my html index. Here is the code I put in my index.html:

<!doctype html>
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

<div class="responsive">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
				



  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>


  <script type="text/javascript">
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
  </script>

  </body>
</html>

  </script>

[rbarbour]

rename slick.css to stylesheet_slick.css and upload to:
/includes/templates/YOUR_TEMPLATE_FOLDER/css/

rename slick.js to jscript_slick.js and upload to:
/includes/templates/YOUR_TEMPLATE_FOLDER/jscript/

[rbarbour]

I forget newer version has a separate css file for the theme, that needs to be uploaded as well

[Feznizzle]

It's working, yipeee!!! Thank you so much!

Now to figure out how to get rid of the tiny buttons below and replace with arrows at side!

And then the SUPER FUN part of getting it integrated with the tpl_modules_additional_images.php.

uuuuug!