Feature Requests

The point of doing it would be to place the thumbnails where you want. To the point we would want them below all the time.  What changes in css needs to be set to accomplish this.  Thanks.

Hello,

If you have enabled JCarousel in your CloudZoom you can try this:

First you need to open this file: ~\Plugins\SevenSpikes.Nop.Plugins.CloudZoom\Themes\Motion\Views\CloudZoom\CloudZoom.cshtml and find this code:

jQuery('#carousel').jcarousel({
                vertical: true,
                scroll: 1,
                numVisible: 4,
                wrap: 'both',
                size: @imagesCount
            });

Change it to this:

jQuery('#carousel').jcarousel({
                vertical: false,
                scroll: 1,
                numVisible: 4,
                wrap: 'both',
                size: @imagesCount
            });

Next open this file: ~\Plugins\SevenSpikes.Nop.Plugins.CloudZoom\Themes\Motion\Content\jcarousel\jcarousel.css and replace its all content with this:

/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/

/*** CONTAINERS ***/


.jcarousel-skin-thumbs .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-thumbs .jcarousel-clip-horizontal {
  margin: 0 29px;
}

/*** NAVIGATION ***/


.jcarousel-skin-thumbs .jcarousel-prev-horizontal,
.jcarousel-skin-thumbs .jcarousel-next-horizontal {
    position: absolute;
    top: 0;    
    width: 20px;
  height: 90px;
  cursor: pointer;
}
.jcarousel-skin-thumbs .jcarousel-prev-horizontal {
    left: 0;
    background: #fff url('images/prev-horizontal.png') center no-repeat;
}
.jcarousel-skin-thumbs .jcarousel-next-horizontal {
    right: 0;
    background: #fff url('images/next-horizontal.png') center no-repeat;
}
.jcarousel-prev-horizontal:hover,
.jcarousel-prev-horizontal:focus,
.jcarousel-next-horizontal:hover,
.jcarousel-next-horizontal:focus {
  border-color: #aaa;
  opacity: 0.7;
}
.jcarousel-skin-thumbs .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-thumbs .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-thumbs .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-thumbs .jcarousel-prev-disabled-horizontal:active, 
.jcarousel-skin-thumbs .jcarousel-next-disabled-horizontal,
.jcarousel-skin-thumbs .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-thumbs .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-thumbs .jcarousel-next-disabled-horizontal:active {
  cursor: default;
}

/*** THUMBNAILS ***/


.jcarousel-skin-thumbs .jcarousel-item-horizontal {
    margin: 0 10px 0 0;
}
.jcarousel-skin-thumbs .jcarousel-item-horizontal a {
  width: 82px;
  height: 82px;
    margin: 0; /*RESET*/
}
.jcarousel-skin-thumbs .jcarousel-item-horizontal:empty {
  display: none;
}

.gallery .picture-wrapper,
.gallery .picture-thumbs {
    float: none !important;
}

.gallery .picture-thumbs {
  overflow: hidden;
}
.gallery .picture-thumbs a {
  position: relative;
  float: left;
  width: 90px;
  height: 90px;
  margin: 0 !important;
  border: 1px solid #bbb;
  overflow: hidden;
  background: #fff;
}

Now you can add two images in this folder ~\Plugins\SevenSpikes.Nop.Plugins.CloudZoom\Themes\Motion\Content\jcarousel\images. They should be named "prev-horizontal.png" and "next-horizontal.png".

If you do not use JCarousel for the product thumbs, then you can just go to this file: ~\Themes\Motion\Content\css\980.css , find these lines and comment them:

.gallery .picture-wrapper {
        width: 480px;
        float: left;
        font-size: 0;
    }
        .gallery .picture-wrapper:only-child {
            width: 100%;
            float: none;
        }
    .gallery .picture-thumbs {
        float: right;
    }
        .gallery .picture-thumbs a {
            display: block;
            margin: 0 0 10px !important;
            width: 90px;
            height: 90px;
        }

That is all you need.

Best Regards !

That did the trick.  Thanks.

In the footer for contact details add a possibility for fax. I know it is old tech, but the customer still uses it...

Hello,

To add that you have to locate the footer.cshtml file which is located in Themes\Motion\Views\Common folder. When you open the code you have to paste this code after line 26:

<li class="fax">Your client fax number</li>

if you want to add an icon you have to add a background image to this css selector

.footer-menu li.fax

or if you want to use the icon used for the e-mail just put in class="email" in the code we added.

Hello Team, how to set vertically alignment of  JCarousel in Cloud Zoom plugin  

Hi,

There is no option for this, currently.
However you can suggest this to our UserVoice portal.

hi,I try to customize code but still it's not display in proper format
(here is my code) :

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#carousel').jcarousel({
            vertical: true,
            scroll: 1,
            orientation: vertical,
            numVisible: 4,
            wrap: 'both',
            size: @imagesCount,
            rtl: @supportRtl.ToString(System.Globalization.CultureInfo.InvariantCulture).ToLower()
        });

        jQuery(".jcarousel-prev, .jcarousel-next").disableTextSelect();
    });

any idea ?

Hi,

Could you please elaborate on this "it's not display in proper format".

Looking forward to your reply.