I am using Magic Zoom Plus and Magic Slideshow on this website: www.kennykreations.com/test/
On proddetail page, all of the thumbnails are showing, instead of a slideshow:
https://www.kennykreations.com/test/proddetail.php?prod=Antique+Rose+Quilt
This is what I have in includes
//MagicTools
$GLOBALS['magictoolbox']='MagicSlideshow';
$GLOBALS['magicslideshow']='data-options="autoplay:true; effect:fade; selectors: bottom; selectors-style: thumbnails;" id="zoom-slideshow"';
$GLOBALS['magictoolbox']='MagicZoomPlus';
This is what I have in header
<!--MagicZoom -->
<link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" />
<link type="text/css" rel="stylesheet" href="magicslideshow/magicslideshow.css" />
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
Can you please tell me what I need to do to make the thumbnail images appear as an image gallery slideshow?
Thanks, Lyn

Hi Lyn, I don't think you need this line <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script> I'm not seeing it in the setup instructions here https://www.ecommercetemplates.com/help/magictoolbox.asp#magicslideshow and try commenting out $GLOBALS['magictoolbox']='MagicSlideshow'; from the includes.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Hi Marlene,
I have made those changes, but all the thumbnails continue to appear - no slideshow.
Thanks, Lyn

Hi Lyn

Can you check the steps here for combining two different tools

www.ecommercetemplates.com/help/magictoolbox.asp#magicscrollplus

Andy

Please feel free to review / rate our software

Hi Andy, I have removed Magic Zoom Plus.
This is what I have in includes
//MagicTools
$GLOBALS['magictoobox']="MagicSlideshow";
$GLOBALS['magictooloptions']='data-options="selectors: bottom; selectors-style: thumbnails; selectors-size: 60px"';

This is what I have in header
<!--MagicTools -->
<link type="text/css" rel="stylesheet" href="magicslideshow/magicslideshow.css" />

https://www.kennykreations.com/test/proddetail.php?prod=Antique+Rose+Quilt
Thumbnails are not showing. They do show when you click on PREV and NEXT
Thanks, Lyn

You will also need the Magic Zoom Plus css file line too.

Andy

Please feel free to review / rate our software

Hi Lyn, you do have jpg photos loaded in the "GIANT Image" column, yes ?
If no, then that is the reason why MagicSlideshow is not activating.
Find more details about MagicSlideshow on my website here >>

Gary

Hi Andy and Gary,
I have put Magic Zoom Plus up again.
I have all of the images loaded in "Giant" column.
Now it is back to showing all of the thumbnails under the main image.
I cannot get it to put the thumbnails into the image gallery format for Magic Slideshow.
Thanks, guys.
Lyn

Hi Lyn,
Taking a closer look, according to the Magic Zoom Plus examples page, you can combine it with the additional features available in:
(1) Magic Scroll, or
(2) Magic 360
but not Magic Slideshow, because that is quite similar anyway I guess.

You have Magic Zoom Plus working fine. Maybe you could add this CSS to center the featured image.

div.detailimage {
width: 64%;
padding: 2px;
float: left;
clear: left;
text-align: center;
}

The Magic Zoom Plus Settings Wizard page allows you to experiment with all the parameters available, which you can add to the Ecommerce Templates includes.php configuration file.

Stuff like Swap Images on Hover = selectorTrigger: hover;

Gary

Thank you, Gary.
Cheers, Lyn

Hi Gary,
I am using Flexbox on my products page. This is what I have in ectsyle.css
/*flexbox */
div.products, div.csproducts {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
padding: 0;
margin: 0;
width:848px;
}
It is displaying brilliantly on my laptop.
What do I need to do so that it displays correctly on iPad and phones?
Thanks, Lyn

Lyn, check out this post >>

Gary

Thank you, Gary.
Cheers, Lyn