[StellarBytes]

Hi All.

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.

[chrisbti]

That's what I like to see...simple edits...good one! Thanks Chris

[thelight]

This is very nice and simple. Good job!

[colortone]

This is great, thank you for sharing.
Regards,

[brightlaunch]

Hi,
just what I am looking for - having worked with various lightboxes before. However, when I add your code to my page (site is powered by version 3.0.4), the resource opens in a new window, not in the modal window. Sounds like some missing javascript or id mismatch.

Uli

[hdg]

Very nice! Can you also explain how you included the link to the Fabric Tab in the Comment field that appears below the product option?

[StellarBytes]

It's pretty simple.

Design > Product Tabs.

Here you create a new tab for each gallery you want to show and fill it with whatever you like. In my case, I created a product tab called "Fabrics" of type "HTML Block" and I put all my images with the code above into the HTML block.

I have 3 ranges of fabrics to show, so I created 3 HTML blocks within Product Tabs and assigned each Product Tab to the relevant products.

Now that you have created your product tab with the gallery included, to link the two, on your product option, you will see a 'Comments' box. I just put this simple HTML in there:

Click <a href="#product_tab_23" rel="nofollow">Fabrics tab</a> below to view <a href="#product_tab_23" rel="nofollow">fabrics</a>.

You can find the "product_tab_ID" via Design > Product Tabs > Hover over the 'Edit' link of the product tab, in the URL, you will see the ID like so:

/youradmin.php?dispatch=product_options.update&option_id=23

[hdg]

Thanks so much for the quick reply. I tried entering the HTML in the Comment field as you described, but the HTML is displayed on the product page instead of the links. As a test, I copied your HTML exactly and just changed the ID from 23 to 24, so I think it should be correct. I'm running CS-Cart 4 Beta 4, so I guess it could be problem with that build.

[StellarBytes]

You will find the following code in this file:

/skins/yourskin/customer/views/products/components/product_options.tpl

{if $po.comment}
            <p class="description clear-both">{$po.comment}</p>
        {/if}

Replace this code with:

	    {if $po.comment}
		    <p class="description clear-both">{$po.comment|unescape}</p>
	    {/if}

Now your HTML code should render as expected. Note this is for the Comment field in the edit product options page which has the instruction "Enter your comment to appear below the option".

[Wilko]

StellarBytes - this is a really nice way to display a wide range of variations of a product. It looks great on the live site.

Now - my next thoughts were, how can we get these to update a product option?

I have a major need for this functionality as have some highly customisable products with lots of styles/cloth options - I'm working on this and starting to get something working.

Ideal scenario (IMHO) is how you have set it up but with a link/button displayed in the large image shown in modal window 'Select This Option'.

I've got this partially working but will post back when it's more fully functional...

[Wilko]

Just one other point in V3.05:

Had to use

unescape:html

to get html in Option comment to render:

  {if $po.comment}
   <p class="description clear-both">{$po.comment|unescape:html}</p>
  {/if}

[Wilko]

I have developed a way to take the image gallery in a tab a stage further whereby a user can view larger image options in the gallery tab and select one they like and have his update the appropriate option.

This is not an entirely straightforward process and I am sure that there is a better way to do it via a template but I've gone with the 'dirty' way of doing it for now owing to time constraints...

It's going to take me a little time to explain this in a post so if anyone knows of a straightforward way to do this please shout now and save me some time! I will probably post in a new thread and link back to this topic?

[vipshop]

hello
some body can help me with 4 version
i try to do like in post but image opend in page not pop up
thank you

[StellarBytes]

I have not yet implemented this in V4, but I would imagine it will simply be a case of comparing the V2/3 class names and updating them accordingly. For example, V3 - and the original post - use "cm-image-previewer cm-previewer", V4 uses "cm-image-previewer cm-previewer previewer". You'll notice in the demo I posted, if you use firebug to remove the href class, the pop-up function no longer works. No idea why CS-Cart is based around using class instead of ID as a UID.

[Wilko]

Using CSS class as identifier in jQuery enables them to trigger FancyBox on any group of elements with that classname - ID's need to be unique per element so just wouldn't work. The rev and rel properties of the 'a' element tells FancyBox which elements are grouped into a 'gallery' as you pointed out in the beginning...

Apologies if 'teaching to suck eggs'!

Not a V4 user yet but certain that what you are saying is correct StellarBytes i.r.o. identifying change to class names.

I will post back at some point my adaptation to use the gallery of images in the tab to update a relevant product option. It's very time consuming but works nicely. I had intended to work out a way to automate it but just no time spare!

[vmajor]

Has anyone got this to work with v4.1.x? Just replacing "cm-image-previewer cm-previewer" with "cm-image-previewer cm-previewer previewer" does not work.

[snorocket]

I'm finishing up a very simple gallery addon right now for a customer of mine, since he paid for its development I'll see if I can get permission for its availability - Sno

[MimiWatch]

I created a smaller gallery: 

<div class="cm-preview-wrapper">
 
 <a data-ca-image-id="preview" class="cm-image-previewer cm-previewer previewer" href="/439demo/images/gallery/big1.jpg">
 <img class="pict" src="/439demo/images/gallery/thu1.jpg" width="200" height="200">
 </a>
 
 <a data-ca-image-id="preview" class="cm-image-previewer cm-previewer previewer" href="/439demo/images/gallery/big2.jpg">
 <img class="pict" src="/439demo/images/gallery/thu2.jpg" width="200" height="200">
 </a>
 
 <a data-ca-image-id="preview" class="cm-image-previewer cm-previewer previewer" href="/439demo/images/gallery/big3.jpg">
 <img class="pict" src="/439demo/images/gallery/thu3.jpg" width="200" height="200">
 </a>
 
</div> 

How to disable zoom effect only for this gallery?

 

Thx

[eComLabs]

Try to remove the cm-previewer class

[Wilko]

Everything I did (posted in the past ^^^) in V 3.0.5 no longer works in V 4.3.9 so I will be going through it myself and will post anything of use back here...