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:
Code:
<?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:
Code:
<?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.
Bookmarks