Additional Images Slider mod

[Feznizzle]

Hi,

When a product has additional images, I'd like visitors to my site to know about it right away.

To that end, I've built a simple little carousel to display additional images. I currently have it installed on a ZC155e, using a clone of the Responsive Classic template.

Here is a screen shot:



And here is a link in case you'd like to demo:
https://001mc.justmedical.biz/Produc...-Test-1-Images

And here is a zip of all the necessary files, plus instructions for installing:
http://justmedical.biz/slider/Additi...s_Carousel.zip

I take no credit for anything. The script I'm using is called Slick JS by Ken Wheeler and can be found here (http://kenwheeler.github.io/slick/). I was able to get it working thanks to a ton of help from rbarbour.

-
-
--------------------------------------------------
- - - - PROBLEMS IN PARADISE - - - -
--------------------------------------------------
This mod looks decent and works well on large screens (desktop), but wreaks havoc with on responsive versions. I'd like to disable it for responsive or fix it to work for mobile (preferred route).

Can anybody suggest a simple method to disable this for the responsive version of the site? Like, is there a statement I can add somewhere (maybe in the js files) to have it check media size before loading the rest of the script? And if the screen size is less than, say, 1000px it shouldn't load at all?

Better yet, could someone advise as to how I could get this working for mobile?

Thanks!

[davewest]

Better yet, could someone advise as to how I could get this working for mobile?

Thanks!

With all the Carousel scripts you could try one that's already responsive like jQuery OwlCarousel...
I use it on my shopping cart page to advertise other products. It changes number of display images based on screen view and not type. finger ready works grate on mobile devices.

[Feznizzle]

With all the Carousel scripts you could try one that's already responsive like jQuery OwlCarousel...
I use it on my shopping cart page to advertise other products. It changes number of display images based on screen view and not type. finger ready works grate on mobile devices.

I'm open to anything. Any chance you could post (or pm) a link to a zc with OwlCarousel installed?

[Feznizzle]

Alright, Dave... I added the Owl Carousel script in:
https://002mc.justmedical.biz/Produc...-Test-1-Images

I've messed something up. Can't figure it out!

I really like the idea of using this script, so I'm hoping you'll stick your head back in and point me in the right direction! :)

[Feznizzle]

Ok, turns out that Slick is indeed prewired for responsive.

I just told it to turn off (settings: "unslick") screen size 1100. And it works!
https://001mc.justmedical.biz/Produc...-Test-1-Images

What's cool is that instead of turning it off, I will be able to use the slider for all devices by tweaking settings at various breakpoints.

But first I have to overcome two problems:
Bad legacy CSS
Bad argument in legacy tpl_modules_additional_images.php

The CSS stuff should be easy to fix, once the bad argument is corrected. Can somebody help me fix this? Pretty please?

I'm fairly certain the problem is that I am bypassing a call to tpl_columnar_display.php in my current tpl_modules_additional_images.php.

Here is the tpl_modules_additional_images.php code PRIOR to the Slick mod:

<?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'));
 ?>
 <?php
 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {
  ?>
<div id="productAdditionalImages">
<?php
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?>
</div>
<?php 
  }
?>

And here is the Slick mod version of the same file:

<?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 $ 
 *  +++++ Slick Additional Images +++++
 */ 

 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' . $r_params . '>' . $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: 1100, 
settings: "unslick"
}
// You can unslick at a given breakpoint now by adding: 
// settings: "unslick" 
// instead of a settings object 
] 
}); 

}); 

}) (jQuery); 
</script>

I think I need to somehow work the call to /tpl_columnar_display.php back in, such that the output of my slick js gets column display tags applied.

[davewest]

Alright, Dave... I added the Owl Carousel script in:

I've messed something up. Can't figure it out!

I really like the idea of using this script, so I'm hoping you'll stick your head back in and point me in the right direction! :)

It's not something I would use so had little time to play but not fix some issues.. for this to work you will have to modify the two additional image files... as in attached zip. The script will change the number of images based on screen size.. 3 1000px, 5 900px and down to 2 300px.. basic css that came with the demo owl carousel..

[Feznizzle]

Dude.

DUDE.

DUUUUUUUUUUUDE!!!!!!

Holy smokes, thank you SO MUCH!

Awesome! Seriously fantastic!

Dave, words cannot express the true depth of gratitude I'm feeling right now. Seriously, man, thank you.

[Feznizzle]

Btw, for anybody else who stumbles in here, Dave's file set works well with Responsive Classic right out of the bag.

It's an extremely simple install, I only had to do one minor merge (product_info.css; because I have tabbed product pro).

Here is a demo of the default installation of his file set:
https://001mc.justmedical.biz/Produc...-Test-1-Images

And here is where I will be playing with it, tweaking the settings/look:
https://002mc.justmedical.biz/Produc...-Test-1-Images

+++++++++++
Hey Dave, you said:

...for this to work you will have to modify the two additional image files... as in attached zip.

What two additional image files were you referring to?

I couldn't figure that out, so I just went ahead and installed. It worked, I'm tickled with it. But if there is further work to be done, I'd like to take care of it.

[Feznizzle]

Dave, looks like there is a validation issue:
https://validator.w3.org/nu/?showsou...-Test-1-Images

Says: Bad value for attribute onclick on element a: missing ; before statement

Here is the source it highlights, but for the life of me I can't see anything wrong:
<a href="images/IMG_1562-1.jpg" onclick="javascriptopupWindow('https://002mc.justmedical.biz/index.php?main_page=popup_image_additional&amp;pID=1000&amp;pic=0&amp;products_i mage_large_additional=images/IMG_1562-1.jpg&amp;zenid=7de953591ba789a54c904dec9bca0cef') return false;" title="Product Test #1 - Images" target="_blank">

Maybe this is because I haven't addressed the "other two image files" you mentioned?

[Feznizzle]

Oh. I have image handler, should have merged additional_images.php

Working on that, hoping it will fix the validation issue.