Service Portal/SC Catalog Item widget/Carousel for Catalog Item Pictures?

[Jimmy45]

Hello Community!

I am sure there is a way, but for some reason I can't figure it out, how to add one of the following to the Catalog Items in the portal:When a user navigates to the Service Portal, Clicks on the Catalog and selects a catalog item, I want them to be able to see not only the description of the product, but instead of adding multiple pictures of the catalog item, we want them to have more of that Amazon feel.  When they hover over the tiny thumbnails of a picture they get the larger picture of the item like below:

OR

To have just a Carousel embedded that will show the pictures of the catalog item like below:

 

If there is a way to do this, please feel free to share.  Let me know where I need to go and what code to add, because this is racking my brain.  I know that this involves using CSS and the HTML editor within the catalog item itself only supports HTML, I thought about adding it as a Macro with Label variable, but not sure if this would work or not.  That is my next task.  Thanks in advance!

[Piyush Dhoke2]

Hi Jimmy,

I hope you are using widget: 'SC Catalog Item'

Then please have a look in below URL, it might help you to solve your request.

http://codepen.io/anon/pen/NGJJeB

Thanks,

Piyush Dhoke

[Jimmy45]

@Piyush Dhoke 

This looks amazing!  I have made a clone of the sc_catalog_item widget, but do you know where I should insert this code within the HTML section, CSS section, and am I adding this to the client side or the server side for the JS, and where to insert it into either of those?  I want to test this out.

Thank you so much!

[Jimmy45]

@Piyush Dhoke 

I also noticed it is not the same as my example.  Yours zooms into a part of the picture.  I want to be able to hover of a small thumbnail and it displays the whole picture, not a zoomed in piece.  Does that make sense?

[Piyush Dhoke2]

Hi Jimmy,

Please add below css to the widget:

.img-responsive:hover {

       transform: scale(1.8);

  }

Regards,

Piyush Dhoke