Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Very Simple Image Gallery Rate Topic   - - - - -

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 11 March 2013 - 04:17 PM #1

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.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • chrisbti
  • Senior Member
  • Members
  • Join Date: 20-Oct 11
  • 269 posts

Posted 11 March 2013 - 07:18 PM #2

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

Regards, God Be With You! Jesus Christ our Lord & Savior.
BTI - Better Tools For Industry
Industrial Hand Tools Made in USA | www.BTI-Tool.com | v.4.11.2 | Apache


 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 11 March 2013 - 08:39 PM #3

This is very nice and simple. Good job! :-)

 
  • colortone
  • Senior Member
  • Members
  • Join Date: 31-Jan 10
  • 368 posts

Posted 12 March 2013 - 02:50 AM #4

This is great, thank you for sharing.
Regards,

 

Posted 27 April 2013 - 02:38 PM #5

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
  • Junior Member
  • Members
  • Join Date: 25-Nov 09
  • 4 posts

Posted 02 June 2013 - 11:28 PM #6

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
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 03 June 2013 - 09:10 AM #7

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

Hire StellarBytes for CS-Cart Design & Development Services

 
  • hdg
  • Junior Member
  • Members
  • Join Date: 25-Nov 09
  • 4 posts

Posted 04 June 2013 - 01:49 AM #8

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
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 04 June 2013 - 11:33 AM #9

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".
Hire StellarBytes for CS-Cart Design & Development Services

 
  • Wilko
  • Advanced Member
  • Members
  • Join Date: 14-Feb 13
  • 102 posts

Posted 21 June 2013 - 10:10 AM #10

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
  • Advanced Member
  • Members
  • Join Date: 14-Feb 13
  • 102 posts

Posted 21 June 2013 - 10:48 AM #11

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
  • Advanced Member
  • Members
  • Join Date: 14-Feb 13
  • 102 posts

Posted 03 July 2013 - 08:16 AM #12

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
  • Newbie
  • Authorized Reseller
  • Join Date: 01-Jun 12
  • 7 posts

Posted 26 November 2013 - 03:22 PM #13

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
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 26 November 2013 - 04:16 PM #14

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.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • Wilko
  • Advanced Member
  • Members
  • Join Date: 14-Feb 13
  • 102 posts

Posted 05 December 2013 - 04:20 PM #15

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
  • Member
  • Members
  • Join Date: 08-Feb 10
  • 72 posts

Posted 22 May 2014 - 01:57 PM #16

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
  • Forum Janitor
  • Members
  • Join Date: 15-Mar 06
  • 2519 posts

Posted 22 May 2014 - 02:36 PM #17

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
SNOROCKET.COM, Now Accepting PRE-ORDERS:
Customer Service (Helpdesk) Addon for CS-Cart v4.3.1
Quote and Invoicing Addon for CS-Cart v4.3.1

 
  • MimiWatch
  • Member
  • Members
  • Join Date: 14-Jun 08
  • 137 posts

Posted 15 August 2016 - 10:49 AM #18

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
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19976 posts

Posted 15 August 2016 - 02:16 PM #19

Try to remove the cm-previewer class


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • Wilko
  • Advanced Member
  • Members
  • Join Date: 14-Feb 13
  • 102 posts

Posted 09 September 2016 - 10:41 AM #20

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...