Integrating Images

Requirement:
  • Version 6 at least


Integration:
There are lot of features which has been changed in v6. Images is one of  those. The new integration includes options for Images Lightbox Slideshow, Multiple images, Multiple CSS styles to images and lot more.
To integrate image simply create HTML Shortcode from Admin Panel and Paste it on your HTML page.
Simplest example:
<span class='sym-img' data-pid='1'></span>
Explanation:  sym-img is class identifier for images in Ajax Cart system. data-pid is the attribute which hold the product id of the product whose image is to be integrated.
More examples
  • Various sizes: simply  add data-size attribute to code and system will show image of  that size. Sizes allowed are small, medium, large. your new code will look like <span class='sym-img' data-pid='1' data-size='small'></span>
  • Un-responsive image: By default the image generated is responsive. if you want to disable this you can add data-responsive='false' to your code just like data-size.
  • Image shapes: By default a simple image is shown if you want  to show various shapes (http://getbootstrap.com/css/#images-shapes) you can add data-rounded='true' or data-circle='true' or data-thumbnail='true' to get desired image shape.
  • Enable/Disable Images lightbox: By default system creates the image clickable and when it is clicked it shows other images of product in a lightbox. To disable it simply add data-show-lightbox='false' to your HTML code.
You can add multiple attributes in your HTML shortcode. e.g. <span class='sym-img' data-pid='1' data-size='small' data-responsive='false' data-show-lightbox='false'></span>

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.