dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated jqzoom and products compare page is responsive now

Browse Source
This commit is contained in:
TMMeilleur
2013-12-02 16:41:13 +02:00
parent c8ca67eef5
commit f99140113b
9 changed files with 1056 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default-bootstrap/css/comparator.css
+83
View File
@@ -94,3 +94,86 @@ table#product_comparison .product-rating {
.footer_link {
margin-bottom: 20px;
}
#product_comparison .comparison_feature .product_name {
display: none;
}
@media (max-width: 992px) {
#columns table#product_comparison tbody tr td.td_empty span {
font-size: 14px;
}
#columns table#product_comparison tbody tr td.product-block {
padding: 14px;
}
#columns table#product_comparison .button.ajax_add_to_cart_button, #columns table#product_comparison .button.lnk_view {
font-size: 14px;
}
}
@media (max-width: 767px) {
#product_comparison table,
#product_comparison thead,
#product_comparison tbody,
#product_comparison th,
#product_comparison td,
#product_comparison tr {
display: block;
}
#product_comparison thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#product_comparison tr {
overflow: hidden;
}
#product_comparison tr:last-child {
border-bottom: none;
}
#product_comparison tr:last-child td {
border-bottom: none;
}
#product_comparison td {
border: none;
position: relative;
white-space: normal;
float: left;
width: 33.33%;
}
#product_comparison td.td_empty {
width: 100% !important;
clear: both;
}
#product_comparison td:last-child {
border-bottom: none;
}
#product_comparison .comparison_feature .feature-name {
width: 100%;
float: none;
clear: both;
}
}
@media (max-width: 480px) {
#product_comparison td {
float: none;
width: 100%;
}
#product_comparison .comparison_feature td {
float: left;
width: 50%;
}
#product_comparison .comparison_feature .feature-name {
width: 100%;
clear: both;
}
#product_comparison .comparison_feature .product-name {
width: 50%;
float: left;
display: block;
}
}
themes/default-bootstrap/css/product.css
+8 -1
View File
@@ -96,6 +96,13 @@ img {
#pb-right-column #image-block #view_full_size .span_link:hover:after {
color: #333333;
}
#pb-right-column #image-block a.jqzoom div div img {
width: auto;
max-width: 10000px;
}
#pb-right-column #image-block a.jqzoom div div .zoomWrapper {
border: none;
}
.ie8 #pb-right-column #image-block #view_full_size .span_link {
background: #fff;
@@ -145,7 +152,7 @@ img {
width: 90px;
cursor: pointer;
border: 1px solid #dbdbdb;
margin-right: 9px;
margin-right: 8px;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
themes/default-bootstrap/js/product.js
+11 -7
View File
@@ -491,7 +491,10 @@ function refreshProductImages(id_product_attribute)
$('#thumbs_list li').hide();
$('#thumbs_list').trigger('goto', 0);
for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
$('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show();
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
$('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show().children('a.shown').trigger('click');
else
$('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show();
if (parseInt($('#thumbs_list_frame >li:visible').length) < parseInt($('#thumbs_list_frame >li').length))
$('#wrapResetImages').show('slow');
else
@@ -543,12 +546,13 @@ $(document).ready(function()
//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox'));
$('img.jqzoom').jqueryzoom({
xzoom: 600, //zooming div default width(default width value is 200)
yzoom: 600, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
$('.jqzoom').jqzoom({
zoomType: 'innerzoom', //innerzoom/standard/reverse/drag
zoomWidth: 458, //zooming div default width(default width value is 200)
zoomHeight: 458, //zooming div default width(default height value is 200)
xOffset: 21, //zooming div default offset(default offset value is 10)
yOffset: 0,
title: false
});
}
//add a link on the span 'view full size' and on the big image
themes/default-bootstrap/product.tpl
+10 -5
View File
@@ -186,7 +186,7 @@ var contentOnly = {if $content_only}true{else}false{/if}
<div id="pb-right-column" class="col-xs-12 col-sm-4 col-md-5">
<!-- product img-->
<div id="image-block">
<div id="image-block" class="clearfix">
{if $product->on_sale}
@@ -197,9 +197,14 @@ var contentOnly = {if $content_only}true{else}false{/if}
{if $have_image}
<span id="view_full_size">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
{if !$content_only}<span class="span_link">{l s='View larger'}</span>{/if}
{if $jqZoomEnabled && $have_image && !$content_only}
<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html'}">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}"/>
</a>
{else}
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
{if !$content_only}<span class="span_link">{l s='View larger'}</span>{/if}
{/if}
</span>
{else}
<span id="view_full_size">
@@ -223,7 +228,7 @@ var contentOnly = {if $content_only}true{else}false{/if}
{assign var=imageTitlte value=$product->name|escape:'html'}
{/if}
<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
<a {if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}'{literal}}{/literal}" {else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}"{/if} title="{$imageTitlte}">
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" height="{$mediumSize.height}" width="{$mediumSize.width}" itemprop="image" />
</a>
</li>
themes/default-bootstrap/sass/comparator.scss
+96 -1
View File
@@ -109,4 +109,99 @@ table#product_comparison {
.ie8 table#product_comparison .product-image-block .product_image img {
width:auto;
}
.footer_link { margin-bottom:20px;}
.footer_link { margin-bottom:20px;}
#product_comparison{
.comparison_feature{
.product_name{display: none;}
}
}
@media (max-width: 992px) {
#columns table#product_comparison{
tbody tr td.td_empty span {
font-size: 14px;
}
tbody tr td.product-block {
padding: 14px;
}
.button.ajax_add_to_cart_button, .button.lnk_view{
font-size: 14px;
}
}
}
@media (max-width: 767px) {
#product_comparison table,
#product_comparison thead,
#product_comparison tbody,
#product_comparison th,
#product_comparison td,
#product_comparison tr {display: block;}
#product_comparison thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#product_comparison tr {
overflow: hidden;
&:last-child{
border-bottom: none;
td{
border-bottom: none;
}
}
}
#product_comparison td {
border: none;
position: relative;
white-space: normal;
float: left;
width: 33.33%;
&.td_empty{
width: 100% !important;
clear: both;
}
&:last-child{
border-bottom: none;
}
}
#product_comparison{
.comparison_feature{
.feature-name{
width: 100%;
float: none;
clear: both;
}
}
}
}
@media (max-width: 480px) {
#product_comparison td {
float: none;
width: 100%;
}
#product_comparison{
.comparison_feature{
td{
float: left;
width: 50%;
}
.feature-name{
width: 100%;
clear: both;
}
.product-name{
width: 50%;
float: left;
display: block;
}
}
}
}
themes/default-bootstrap/sass/product.scss
+12 -1
View File
@@ -94,6 +94,17 @@ img{
&:hover:after{color:$base-text-color}
}
}
a.jqzoom {
div div {
img {
width:auto;
max-width:10000px;
}
.zoomWrapper {
border:none;
}
}
}
}
}
.ie8 #pb-right-column {
@@ -151,7 +162,7 @@ img{
width:90px;
cursor:pointer;
border:1px solid $product-image-border;
margin-right:9px;
margin-right:8px;
line-height:0;
@include box-sizing(border-box);
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { //min 768px max 991px