While transferring a store from V2 to V3, one of the key requirements was the ability to display a bunch of images on the product page.
This set-up was made very simple. All products within the same brand had to have the respective brands images added to the product pages. So, I created a custom block in a product tab for each brand, then assigned these tabs to their respective branded products.
But how could I get all of these 50+ images on one product page, in a much more elegant manner than simply dumping them into the WYWIWYG editor.
The answer? Use the gallery effects already built-in to CS-Cart. See my example of this here - click the Fabrics tab to reveal the image gallery.
Here's how, paste this into your WYSIWYG editor and alter as you please. The CSS-classes are the important parts here.
<div class="cm-image-wrap"> <a class="cm-image-previewer cm-previewer" title="Image 1 Pop-Up Caption" rel="1" rev="1" href="/images/your-first-full-size-image.jpg"> <img title="Image Hover Title" src="/images/your-first-small-image.jpg" border="0" alt="Alternative Image Text" width="120" height="120" /> </a> <a class="cm-image-previewer cm-previewer" title="Image 2 Pop-Up Caption" rel="1" rev="2" href="/images/your-second-full-size-image.jpg"> <img title="Image Hover Title" src="/images/your-second-small-image.jpg" border="0" alt="Alternative Image Text" width="120" height="120" /> </a> <a class="cm-image-previewer cm-previewer" title="Image 3 Pop-Up Caption" rel="1" rev="3" href="/images/your-third-full-size-image.jpg"> <img title="Image Hover Title" src="/images/your-third-small-image.jpg" border="0" alt="Alternative Image Text" width="120" height="120" /> </a> </div>You can add multiple individual galleries on a page. Just incrase the "rel" value, which will create a new gallery. In my example you will see there are 3 individual galleries.
No 3rd party addons, no hacks, just taking advantage of what is already there in V3.