JS/CSS thumbnail slider for additional images

[Feznizzle]

Hard to word it, sry.

I'm trying to kill the space to the right of product images in screenshot.


My additional images are set to 50px max. I'd like this thing to increase width of ".responsive" by 60px (50px for image, plus 10px margin-right) per each additional product image. So before it hits the forth image (triggering slider button), it would max out at 180px (3 images @ 60px).

Make sense?

Btw, I have decided to figure out how to kill the left button.

[rbarbour]

Make these changes first, this basically only adds <div class="responsive"> if more than 3 additional images

<?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($num_images > 3) {
 echo '<div class="responsive">';
 }

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}

  }

 if ($num_images > 3) {
 echo '</div>';
 }

?>

[Feznizzle]

Crud, I deleted my back up tpl_modules_additional_images.php from right before you gave me the new code!

Anyway, I had my js inside of that file. Not sure how I had it cuz I can't seem to replicate it now.

Below is the last way I tried it. Breaks the page. Can you show me how to work it back in?

<?php 
/** 
 * Module Template: 
 * Loaded by product-type template to display additional product images. 
 * 
 * @package templateSystem 
 * @copyright Copyright 2003-2005 Zen Cart Development Team 
 * @copyright Portions Copyright 2003 osCommerce 
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $ 
 *  
 */ 

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php')); 

 if ($num_images > 3) { 
 echo '<div class="responsive">'; 
 
 
 <script type="text/javascript">
(function($) {
$(document).ready(function() {

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

});

}) (jQuery);
</script>
 
 
 
 } 

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) { 

if (is_array($list_box_contents) > 0 ) { 
 for($row=0;$row<sizeof($list_box_contents);$row++) { 
    $params = ""; 
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params']; 

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) { 
      $r_params = ""; 
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params']; 
     if (isset($list_box_contents[$row][$col]['text'])) { 

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>';  


      } 
    } 
  } 
} 

  } 

 if ($num_images > 3) { 
 echo '</div>'; 
 } 

?>

[rbarbour]

unless you have something other than what I can see in this file just copy my code and paste it in

 <?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

 if ($num_images > 3) {
 echo '<div class="responsive">';
 }

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}

 if ($num_images > 3) {
 echo '</div>';
 }

  }
?> 

<script type="text/javascript">
(function($) {
$(document).ready(function() {

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

});

}) (jQuery);
</script>

Crud, I deleted my back up tpl_modules_additional_images.php from right before you gave me the new code!

Anyway, I had my js inside of that file. Not sure how I had it cuz I can't seem to replicate it now.

Below is the last way I tried it. Breaks the page. Can you show me how to work it back in?

[Feznizzle]

Working again, ty!

It's stacking additional images when no scroll is triggered (less than 4 additional images).

Gonna try to figure that out b4 bed...

One more thing though! How do I kill that left scroll button?

[Feznizzle]

Pretty sure I need that "clear both" that I deleted previously, since we now have additional images standing alone if no scroll. Just can't figure out where.

[rbarbour]

OK lets finish it up:

2 changes, adds div with stock class if less than 3 images

<?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

 if ($num_images > 3) {
 echo '<div class="responsive">';
 } else {
 echo '<div id="productAdditionalImages">';
 }

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div class="centeredContent">' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}


 echo '</div>';
  }
?>  
<script type="text/javascript">
(function($) {
$(document).ready(function() {

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

});

}) (jQuery);
</script>

in the jscript file for the slider find:

                prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button"><i class="fa fa-angle-double-left"></i></button>', 

change to:

                prevArrow: '', 

or add

.slick-prev { display:none; }

to bottom of slider css file

Working again, ty!

It's stacking additional images when no scroll is triggered (less than 4 additional images).

Gonna try to figure that out b4 bed...

One more thing though! How do I kill that left scroll button?

[rbarbour]

This is really an awesome responsive carousel for anyone that comes across this thread.

product info page (basic responsive carousel)

[Feznizzle]

Awesomeness!!

One last minor glitch. When no scroll is triggered, the additional images stack. Here is a link:
http://0stage.justmedical***DOT***bi...roducts_id=159

I'm pretty sure that goes back to this:
https://www.zen-cart.com/showthread....60#post1307260

Now that you have separated out the js, seems like the clear both needs to get put back into the group that does not receive js?

I just can't figure where...

[Feznizzle]

This is really an awesome responsive carousel for anyone that comes across this thread.

product info page (basic responsive carousel)

I agree, digging it!

But what is that screenshot?

When I dl'ed the slick package, I saw a bunch of .exe type files, but I'm on a mac. Is there a software package for pc for generating the slider?