ZX Slideshow support thread

does anyone know if this is compatible with Bootstrap 4 and ZC 2.0?

I have been using the Fluorspar template for a awhile and am moving to a tweaked version of Bootstrap. But I really miss the Nivo slider effect.

Any other options? My searches have not been very productive.

g2ktcf:

does anyone know if this is compatible with Bootstrap 4 and ZC 2.0?

I have been using the Fluorspar template for a awhile and am moving to a tweaked version of Bootstrap. But I really miss the Nivo slider effect.

Any other options? My searches have not been very productive.
Apologies for hijacking this thread, but there's a Home-Page Slider available for the Bootstrap template: https://github.com/lat9/bs4_home_slider

that is what I was looking for! Thank you!

Keep in mind v3 is completely different and no longer based on Nivo Slider. It's now based on SwiperJS and animate.css so you have different effects, plus you can add text layers over the images.
Demo here.
For admin demo, feel free to PM me.

But, since you're using the Bootstrap template, it might be a good idea to use the slider built specifically for that template (as per lat9's suggestion).

Thanks for updating this plugin balihr for compatibility with Zen v.2!

I have installed it in a fresh version of Zen Cart v.2.1 and it all installed and worked perfectly...I have the old version on my currently Zen Cart v.1.5.8 site.

One question....I have inserted 2 slides into the ZX Slideshow and insured I have configured it to be turned on. As I am using it on my homepage, I have inputted 'home' into my Slide Group on both of the slides and then used the sort order near the bottom to dictate the order of the slide.

When I go to my homepage, all displays correctly, I have 2 dots in the lower center of the slide indicating that there are 2 slides, but as I change back and forth, it only displays the one slide. When I manually advance it to slide 2, it goes to slide 2 but it displays slide 1.

Obviously I have inputted something wrong in the slide config. Can you tell me what I've missed??

Thanks,
Jeff

A link to your site would be very helpful. If you don't want to post it here, feel free to PM me with the link, and we'll continue the discussion here.

Thanks for your reply....I just have it in my local computer right now for upgrade purposes. When I am finished with the update process and put it up on my server under a subfolder....I will PM you with a link.

Thanks again!

One other quick question.....

I was wanting to change the blue colour of the Next & Previous arrows, but it seems that its taking the .css file from a Swiper script and not from the index_home.css
Is there a file within the plugin that I can change this colour?

I also noticed that the size of the slide is noticeably smaller. My slides are created for the old version (I know the plugin resizes them) at 2048px(w) x 650px(h) I would like to enlargen this new plugin slide size if I can....but want to do it so it does not break the coding for mobile. Not the end of the world stuff....but thought I'd ask if its possible.

Thanks again for your help!

Jeff

Hi balihr,

I have now finished my development site testing on my local computer and have put in my current live site database.

When I open my Admin panel...I have the ZX Slideshow under Admin->Config but under Admin->Tools there is no ZX Slideshow to insert a slide. I have uninstalled and reinstalled the plugin to try to get it work but I have the same problem.

Any ideas as to why this would be and what I can do to fix this? My current live site has the previous Nivo slider version installed as it is v.1.5.8

It is obviously pulling in fragments from older install.

I now have this development site up on a subfolder on my server if this helps you solve anything....here is the address https://www.nitwitcollections.com/new210/

You will see an image in the slide position of a slide I had in my live site....so this confirms that it is retaining info from the previous version.

I would say you've not installed it correctly, most likely the SQL patch failed for some reason.
Console log is showing that ZX_SLIDESHOW_ANIM_SPEED is not defined which is a bit strange... Can you do a screenshot of the admin configuration page to see if all options are there?

Did you uninstall the old ZX Slideshow (Nivo based) before adding the new one, meaning removed the files AND ran the SQL patch to uninstall it?

Thanks for your reply balihr!

I am not sure if I've not explained my errors completely. In my local computer development site, I installed the plugin with just the stock demo data in Zen Cart v.2.1 and it installed correctly and I had the ZX Slideshow and could add slides under Admin->Tools.

When I was done testing on the development site, I installed my current live site database and this is where the Admin->Tools-> ZX slideshow has now disappeared.
I then uploaded my test site and updated database to my server (under a subfolder) to again, test everything and I still have this same problem of the plugin being installed and able to edit the plugin in Admin->Config->ZX Slideshow (attached screen shot) but still no option in Admin->Tools

Here is the screen shot of my server (subfolder) site:

As for uninstalling a previous version....I only added this new version to a stock Zen Cart v.2.1 during upgrading. It worked fine until I added in my live site database.

Hope this helps to further decode the problem and how I can fix this...

Thanks again!

Yup, this helps.
When you took the old database and dropped it onto the new site, ALL data from the old site is now available on the new site, and the data from the new site is gone. So, now your new site has data from the OLD plugin instead of the new one. The Configuration page shows the old plugin options and you're missing the new ones.

So, first of all, rename YOURADMIN/includes/init_includes/init_zx_slideshow_install.php to init_zx_slideshow_install.php_x
Then, go to admin->Tools->Install SQL Patches and copy/paste the uninstall sql for the old plugin so it's completely removed.
Now rename the file back to its original name (init_zx_slideshow_install.php) and refresh the admin.

This should now run the installer for v3 and you should get the new configuration options:

Thanks for this balihr and I will do this!

Will post back when I get this done...and thanks for your help!

Hi balihr...

I have implemented the uninstall of the previous version and I now have the new version installed! Thank you for your help!

I did have to do a bit of workaround to do this and here's how I had to do it....in case others need to do the same thing when installing their database.

When I rename the YOURADMIN/includes/init_includes/init_zx_slideshow_install.php file this breaks my Admin and I cannot access Admin...just get a white screen and Debug Error.

I tried just deleting that file and progressing....same result...a white screen.

I then went in and deletd this latest install of the plugin in my cart and then ran the old plugin sql stmt. I can only get the SQL stmt to run if I upload the file (uninstall-v1.5.x.sql) rather than copy and paste it into the Admin->SQLPatch area. It then processes the 5 statements to uninstall.

I now uploaded the new zx_slideshow_3 plugin and when logging into Admin...it confirms my successful install and I have both the ZX Slideshow in Admin->Config and Admin->Tools.

Lastly...I have one question on its operation.

When I fill in the fields in Admin-Tools_ZX Slideshow I have inputted 2 slides for testing. I see the first slide but when going to the second slide it does not show the image (it is uploaded to the correct directory...both images for slides are in images/slides). For fields, I am only filling in the Title, SlideURL, Slide Group, Image, Sort Order (to control display order) and date of expiry at the end.

I think where I may be going wrong is with the Slide Group. I have filled it in as "home" in both slides. In the previous plugin, we needed to use Slide1, Slide2, etc. Home1, Home2, etc. does not work properly..... Can you point me to what I've done wrong?

Also, when hovering over the slide, even though I've filled in the URL for each slide, it does not hot link it so a customer could click the slide and be taken to that product. Have I missed something to do this while inserting the slide??

Thanks again for your help!

NWCE:

I did have to do a bit of workaround to do this and here's how I had to do it....in case others need to do the same thing when installing their database.

When I rename the YOURADMIN/includes/init_includes/init_zx_slideshow_install.php file this breaks my Admin and I cannot access Admin...just get a white screen and Debug Error.

I tried just deleting that file and progressing....same result...a white screen.

I then went in and deletd this latest install of the plugin in my cart and then ran the old plugin sql stmt. I can only get the SQL stmt to run if I upload the file (uninstall-v1.5.x.sql) rather than copy and paste it into the Admin->SQLPatch area. It then processes the 5 statements to uninstall.
I apologize, this was my oversight. You should've renamed YOURADMIN/includes/auto_loaders/config.zx_slideshow.php as well - this would've avoided the white screen. Sorry about that.

When I fill in the fields in Admin-Tools_ZX Slideshow I have inputted 2 slides for testing. I see the first slide but when going to the second slide it does not show the image (it is uploaded to the correct directory...both images for slides are in images/slides). For fields, I am only filling in the Title, SlideURL, Slide Group, Image, Sort Order (to control display order) and date of expiry at the end.
The second image seems to be renamed - can you check the name of the file you're trying to upload? It comes up as

<img class="background-image__image" src="images/slides/kk_grace_slide/jpg" alt="">

which is obviously wrong - notice the forward slash instead of dot.

I think where I may be going wrong is with the Slide Group. I have filled it in as "home" in both slides. In the previous plugin, we needed to use Slide1, Slide2, etc. Home1, Home2, etc. does not work properly..... Can you point me to what I've done wrong?
Forget about slide groups, that was used in v2, but v3 is completely different.

Also, when hovering over the slide, even though I've filled in the URL for each slide, it does not hot link it so a customer could click the slide and be taken to that product. Have I missed something to do this while inserting the slide??

Thanks again for your help!
Hm... The URL is linked to the button only, not the entire slide. I'll be away until Saturday, but when I come back home, I'll provide an update to make the entire image a link.

Thanks again for all of your help!

That was the fix for slide #2 not showing....I mistakenly had /jpg instead of .jpg on the filename when inputting in. Thanks for catching this!

Thanks as well for offering to have a look at the URL linking the whole slide....when you get a chance.

Much appreciated!

One other question I had on creating the slide....

I know that this new plugin version uses the height and then scales your width based on the device. I am trying to make a template so when I create my slides, they won't be chopped off for the width.

In examining it on a desktop, it looks like the container size is 1039px wide. It seems like no matter what size I create my slide at...it still chops off the width. Would you know how some parameters to use???

Thanks again.

NWCE:

Thanks again for all of your help!

That was the fix for slide #2 not showing....I mistakenly had /jpg instead of .jpg on the filename when inputting in. Thanks for catching this!

Thanks as well for offering to have a look at the URL linking the whole slide....when you get a chance.

Much appreciated!

Can you do me a favor and try with the code below? Replace what you have in includes/templates/YOURTEMPLATE/templates/zx_slideshow.php

<?php

if (ZX_SLIDESHOW_STATUS == 'true') {
// TODO - slide_group will be dynamic once code for category and EZ Pages is ready
    $slides_sql = "SELECT * FROM " . TABLE_ZX_SLIDESHOW . "
            WHERE status = '1'
            AND slide_group LIKE 'home'
            ORDER BY slide_sort_order ASC";
    $slides = $db->Execute($slides_sql);
    ?>

    <div class="home-slider-area">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <?php
                foreach ($slides as $slide) {
                    $slide_data = json_decode($slide['slide_data'], true);

                    $alt = [];

                    $style_slideTitlePos = $style_slideSubtitlePos = $style_slideLeadinPos = $style_slideTextPos = $style_slideButtonPos = '';
                    $style_slideTitle = $style_slideSubtitle = $style_slideLeadin = $style_slideText = $style_slideButton = '';
                    $animationsTitle = $animationsSubtitle = $animationsLeadin = $animationsText = $animationsButton = '';

                    // slide lead in
                    if (!empty($slide_data['slide_lead_in'])) {
                        $alt[] = $slide_data['slide_lead_in'];
                        if ($slide_data['slide_lead_in_color'] != '#000000') $style_slideLeadin .= ' color: ' . $slide_data['slide_lead_in_color'] . ';';
                        if ($slide_data['slide_lead_in_position'] != 'left') $style_slideLeadin .= ' text-align: ' . $slide_data['slide_lead_in_position'] . ';';
                        if ($slide_data['slide_lead_in_size'] > 0) $style_slideLeadin .= ' font-size: ' . $slide_data['slide_lead_in_size'] . 'rem; line-height: ' . $slide_data['slide_lead_in_size'] . 'rem;';
                        $style_slideLeadin = 'style="' . $style_slideLeadin . '"';

                        if ($slide_data['slide_lead_in_vertical'] > 0) $style_slideLeadinPos .= ' top: ' . $slide_data['slide_lead_in_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_lead_in_vertical'] . '%);';
                        $style_slideLeadinPos = 'style="' . $style_slideLeadinPos . '"';

                        if ($slide_data['slide_lead_in_speed'] != 'default') $animationsLeadin .= ' animate__' . $slide_data['slide_lead_in_speed'];
                        if ($slide_data['slide_lead_in_delay'] != '0') $animationsLeadin .= ' animate__delay-' . $slide_data['slide_lead_in_delay'] . 's';
                    }

                    // slide title
                    if (!empty($slide_data['slide_top_title'])) {
                        $alt[] = $slide_data['slide_top_title'];
                        if ($slide_data['slide_top_title_color'] != '#000000') $style_slideTitle .= ' color: ' . $slide_data['slide_top_title_color'] . ';';
                        if ($slide_data['slide_top_title_position'] != 'left') $style_slideTitle .= ' text-align: ' . $slide_data['slide_top_title_position'] . ';';
                        if ($slide_data['slide_top_title_size'] > 0) $style_slideTitle .= ' font-size: ' . $slide_data['slide_top_title_size'] . 'rem; line-height: ' . $slide_data['slide_top_title_size'] . 'rem;';
                        $style_slideTitle = 'style="' . $style_slideTitle . '"';

                        if ($slide_data['slide_top_title_vertical'] > 0) $style_slideTitlePos .= ' top: ' . $slide_data['slide_top_title_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_top_title_vertical'] . '%);';
                        $style_slideTitlePos = 'style="' . $style_slideTitlePos . '"';

                        if ($slide_data['slide_top_title_speed'] != 'default') $animationsTitle .= ' animate__' . $slide_data['slide_top_title_speed'];
                        if ($slide_data['slide_top_title_delay'] != '0') $animationsTitle .= ' animate__delay-' . $slide_data['slide_top_title_delay'] . 's';
                    }

                    // slide subtitle
                    if (!empty($slide_data['slide_subtitle'])) {
                        $alt[] = $slide_data['slide_subtitle'];
                        if ($slide_data['slide_subtitle_color'] != '#000000') $style_slideSubtitle .= ' color: ' . $slide_data['slide_subtitle_color'] . ';';
                        if ($slide_data['slide_subtitle_position'] != 'left') $style_slideSubtitle .= ' text-align: ' . $slide_data['slide_subtitle_position'] . ';';
                        if ($slide_data['slide_subtitle_size'] > 0) $style_slideSubtitle .= ' font-size: ' . $slide_data['slide_subtitle_size'] . 'rem; line-height: ' . $slide_data['slide_subtitle_size'] . 'rem;';
                        $style_slideSubtitle = 'style="' . $style_slideSubtitle . '"';

                        if ($slide_data['slide_subtitle_vertical'] > 0) $style_slideSubtitlePos .= ' top: ' . $slide_data['slide_subtitle_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_subtitle_vertical'] . '%);';
                        $style_slideSubtitlePos = 'style="' . $style_slideSubtitlePos . '"';

                        if ($slide_data['slide_subtitle_speed'] != 'default') $animationsSubtitle .= ' animate__' . $slide_data['slide_subtitle_speed'];
                        if ($slide_data['slide_subtitle_delay'] != '0') $animationsSubtitle .= ' animate__delay-' . $slide_data['slide_subtitle_delay'] . 's';
                    }

                    // slide text
                    if (!empty($slide_data['slide_text'])) {
                        $alt[] = $slide_data['slide_text'];
                        if ($slide_data['slide_text_color'] != '#000000') $style_slideText .= ' color: ' . $slide_data['slide_text_color'] . ';';
                        if ($slide_data['slide_text_position'] != 'left') $style_slideText .= ' text-align: ' . $slide_data['slide_text_position'] . ';';
                        if ($slide_data['slide_text_size'] > 0) $style_slideText .= ' font-size: ' . $slide_data['slide_text_size'] . 'rem; line-height: ' . $slide_data['slide_text_size'] . 'rem;';
                        $style_slideText = 'style="' . $style_slideText . '"';

                        if ($slide_data['slide_text_vertical'] > 0) $style_slideTextPos .= ' top: ' . $slide_data['slide_text_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_text_vertical'] . '%);';
                        $style_slideTextPos = 'style="' . $style_slideTextPos . '"';

                        if ($slide_data['slide_text_speed'] != 'default') $animationsText .= ' animate__' . $slide_data['slide_text_speed'];
                        if ($slide_data['slide_text_delay'] != '0') $animationsText .= ' animate__delay-' . $slide_data['slide_text_delay'] . 's';
                    }

                    // slide button
                    if (!empty($slide_data['button_text'])) {
                        $alt[] = $slide_data['button_text'];
                        if ($slide_data['button_color'] != '#000000') $style_slideButton .= ' color: ' . $slide_data['button_color'] . ';';
                        if ($slide_data['button_color_bg'] != '#000000') $style_slideButton .= ' background-color: ' . $slide_data['button_color_bg'] . ';';
                        if ($slide_data['button_size'] > 0) $style_slideButton .= ' font-size: ' . $slide_data['button_size'] . 'rem; line-height: ' . $slide_data['button_size'] . 'rem;';
                        $style_slideButton = 'style="' . $style_slideButton . '"';

                        if ($slide_data['button_vertical'] > 0) $style_slideButtonPos .= ' top: ' . $slide_data['button_vertical'] . '%;
    transform: translateY(-' . $slide_data['button_vertical'] . '%);';
                        if ($slide_data['button_position'] != 'left') $style_slideButtonPos .= ' text-align: ' . $slide_data['button_position'] . ';';
                        $style_slideButtonPos = 'style="' . $style_slideButtonPos . '"';

                        if ($slide_data['button_speed'] != 'default') $animationsButton .= ' animate__' . $slide_data['button_speed'];
                        if ($slide_data['button_delay'] != '0') $animationsButton .= ' animate__delay-' . $slide_data['button_delay'] . 's';
                    }

                    if (!empty($slide['slide_image_alt'])) {
                        $alt_text = $slide['slide_image_alt'];
                    } else {
                        $alt_text = implode(' - ', $alt);
                    }

                    ?>
                    <div class="swiper-slide">
                        <?php if (!empty($slide_data['slide_lead_in'])) { ?>
                            <div
                                    class="slideLeadin animate hidden animate__<?php echo $slide_data['slide_lead_in_effect'] . $animationsLeadin; ?>" <?php echo $style_slideLeadinPos; ?>>
                                <div class="slideLeadin__text" <?php echo $style_slideLeadin; ?>><?php echo $slide_data['slide_lead_in']; ?></div>
                            </div>
                        <?php } ?>

                        <?php if (!empty($slide_data['slide_top_title'])) { ?>
                            <div
                                    class="slideTitle animate hidden animate__<?php echo $slide_data['slide_top_title_effect'] . $animationsTitle; ?>" <?php echo $style_slideTitlePos; ?>>
                                <h2 class="slideTitle__text" <?php echo $style_slideTitle; ?>><?php echo $slide_data['slide_top_title']; ?></h2>
                            </div>
                        <?php } ?>

                        <?php if (!empty($slide_data['slide_subtitle'])) { ?>
                            <div
                                    class="slideSubtitle animate hidden animate__<?php echo $slide_data['slide_subtitle_effect'] . $animationsSubtitle; ?>" <?php echo $style_slideSubtitlePos; ?>>
                                <div class="slideSubtitle__text" <?php echo $style_slideSubtitle; ?>><?php echo $slide_data['slide_subtitle']; ?></div>
                            </div>
                        <?php } ?>
                        <?php if (!empty($slide_data['slide_text'])) { ?>
                            <div
                                    class="slideText animate hidden animate__<?php echo $slide_data['slide_text_effect'] . $animationsText; ?>" <?php echo $style_slideTextPos; ?>>
                                <div class="slideText__text" <?php echo $style_slideText; ?>><?php echo $slide_data['slide_text']; ?></div>
                            </div>
                        <?php } ?>
                        <?php if (!empty($slide_data['button_text'])) { ?>
                            <div
                                    class="slideButton animate hidden animate__<?php echo $slide_data['button_effect'] . $animationsButton; ?>" <?php echo $style_slideButtonPos; ?>>
                                <?php if (!empty($slide['slide_url'])) { ?>
                                    <a href="<?php echo $slide['slide_url']; ?>"<?php echo $slide['slide_open_new_windows'] == 1 ? ' target="_blank"' : '' ?>>
                                        <div class="slideButton__text" <?php echo $style_slideButton; ?>><?php echo $slide_data['button_text']; ?></div>
                                    </a>
                                <?php } else { ?>
                                    <div class="slideButton__text" <?php echo $style_slideButton; ?>><?php echo $slide_data['button_text']; ?></div>
                                <?php } ?>

                            </div>
                        <?php } ?>

                        <?php if (empty($slide_data['button_text']) && !empty($slide['slide_url'])) { ?>
                        <a href="<?php echo $slide['slide_url']; ?>"<?php echo $slide['slide_open_new_windows'] == 1 ? ' target="_blank"' : '' ?>>
                            <?php } ?>
                            <div class="background-image">
                                <img class="background-image__image"
                                     src="<?php echo DIR_WS_IMAGES . $slide['slide_image']; ?>"
                                     alt="<?php echo $alt_text; ?>"
                                    <?php if (ZX_SLIDESHOW_LAZY_LOAD == 'true') {
                                        echo ' loading="lazy"';
                                    } ?>
                                />
                            </div>
                            <?php if (empty($slide_data['button_text']) && !empty($slide['slide_url'])) { ?>
                        </a>
                        <?php } ?>
                        <?php if (ZX_SLIDESHOW_LAZY_LOAD == 'true') { ?>
                            <div class="swiper-lazy-preloader"></div>
                        <?php } ?>
                    </div>


                <?php } ?>
            </div>
            <?php if (ZX_SLIDESHOW_PAGINATION == 'true') { ?>
                <div class="swiper-pagination"></div>
            <?php } ?>

            <?php if (ZX_SLIDESHOW_NAV == 'true') { ?>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            <?php } ?>

        </div>
        <!-- !swiper slides -->

    </div>

<?php } ?>

NWCE:

One other question I had on creating the slide....

I know that this new plugin version uses the height and then scales your width based on the device. I am trying to make a template so when I create my slides, they won't be chopped off for the width.

In examining it on a desktop, it looks like the container size is 1039px wide. It seems like no matter what size I create my slide at...it still chops off the width. Would you know how some parameters to use???

Thanks again.

There's a solution here. Hope it works for you. If not, let me know and we'll figure something out. Once you make the changes, don't forget to reload or clear browser cache so your browser loads the updated file.

BTW, try making all your slides the exact same dimensions - you seem to have 1039x330 px and 1039x369 px now. It's usually best practice to use the exact same dimensions so there's no "jumps".

Yes, that new code for templates/zx_slideshow.php worked perfectly to now hotlink the entire slide to the URL! Great work! Checked the Debug Logs....no errors and clicked the links to insure all tested out perfectly....100%!

I will try implementing the code for the slide size as mentioned in that post...thanks for passing this along. I will then post back once I've had a chance to do this and let you know how it works out!

Thanks again.