Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Scripts/jquery.lazyload.min.js");
Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");
Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Scripts/MegaMenu.js");
<li>
<a class="attachmentLink attachmentLinkImg" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">
<img src="@attachment.ImageUrl" alt="@attachment.ImageUrl" />
</a>
<a class="attachmentLink" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">@attachment.Name</a>
</li>
<li>
<a class="attachmentLink attachmentLinkImg" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">
<img src="@attachment.ImageUrl" alt="@attachment.ImageUrl" />
</a>
<a class="attachmentLink" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">@attachment.Name</a>
<p>@attachment.ShortDescription</p>
</li>
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;
}
jQuery('#carousel').jcarousel({
vertical: true,
scroll: 1,
numVisible: 4,
wrap: 'both',
size: @imagesCount
});
jQuery('#carousel').jcarousel({
vertical: false,
scroll: 1,
numVisible: 4,
wrap: 'both',
size: @imagesCount
});
/*
* 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;
}
Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/768.rtl.css");
Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/980.rtl.css");
Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/480.rtl.css");
Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/480.css");
Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/768.css");
Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/980.css");
themeBreakpoint: 980,
themeBreakpoint: 6980,
@media screen and (min-width: 981px) {
.header-menu .mega-menu {
display: block !important;
}
.filtersGroupPanel li a:before {
content: " ";
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #333;
position: absolute;
top: 50%;
left: 10px;
margin: -6px 0 0;
}
.filtersGroupPanel li a:before {
content: " ";
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #333;
position: absolute;
top: 50%;
left: 10px;
margin: -6px 0 0;
border-radius: 50%;
}