Zoom эффект при наведении на изображение

butikstickerov · 18 апр 2014

Подскажите пожалуйста,что необходимо сделать для того чтобы при наведении на изображение картинка увеличивалась. Пример.

ВОТ CSS

Спойлер

.zoomPad{
position:relative;
float:left;
z-index:3;
cursor:crosshair;
}
.zoomPreload{
-moz-opacity:0.8;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid #CCC;
background-color: white;
padding: 8px;
text-align:center;
background-image: url(../images/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
z-index:110;
width:90px;
height:43px;
position:absolute;
top:0px;
left:0px;
* width:100px;
* height:49px;
}

.zoomPup{
overflow:hidden;
background-color: #FFF;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index:120;
position:absolute;
border:1px solid #CCC;
z-index:101;
cursor:crosshair;
}

.zoomOverlay{
position:absolute;
left:0px;
top:0px;
background:#FFF;
/*opacity:0.5;*/
z-index:5000;
width:100%;
height:100%;
display:none;
z-index:101;
}

.zoomWindow{
position:absolute;
left:110%;
top:40px;
background:#FFF;
z-index:6000;
height:auto;
z-index:10000;
z-index:110;
}
.zoomWrapper{
position:relative;
border:1px solid #999;
z-index:110;
}
.zoomWrapperTitle{
display:block;
background:#999;
color:#FFF;
height:18px;
line-height:18px;
width:100%;
overflow:hidden;
text-align:center;
font-size:10px;
position:absolute;
top:0px;
left:0px;
z-index:120;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.zoomWrapperImage{
display:block;
position:relative;
overflow:hidden;
z-index:110;

}
.zoomWrapperImage img{
border:0px;
display:block;
position:absolute;
z-index:101;

}

.zoomIframe{
z-index: -1;
filter:alpha(opacity=0);
-moz-opacity: 0.80;
opacity: 0.80;
position:absolute;
display:block;
}

cereberlum · 18 апр 2014

Чистым css тут не обойтись, нужен модуль типа МеджикЗум+ правда я бы другой посмотрел если на сайте много товаров, у меджик зума какой-то адский кеш картинок, за то ставится он легко. Да, он дороговатый, точнее условно-бесплатный, но красная надпись триалки лечится.
Фанкибокс еще эффектно смотрится, а кстати, в примере не зум, а какая-то фигня, ибо не увеличивает.

butikstickerov · 19 апр 2014

cereberlum сказал(а): ↑

Чистым css тут не обойтись, нужен модуль типа МеджикЗум+ правда я бы другой посмотрел если на сайте много товаров, у меджик зума какой-то адский кеш картинок, за то ставится он легко. Да, он дороговатый, точнее условно-бесплатный, но красная надпись триалки лечится.
Фанкибокс еще эффектно смотрится, а кстати, в примере не зум, а какая-то фигня, ибо не увеличивает.
Нажмите, чтобы раскрыть...

Использую готовый плагин Image Zoom состоящий из js + css подключаю его по инструкции к product.tpl cкрипт запустился,но не масштабирует не могу понять,где ошибка.

ВОТ product.tpl посмотрите, пожалуйста.

Спойлер

PHP:

<?php echo $header; ?> <div class="breadcrumb"> <div class="wrapper-center"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a> <?php } ?> </div> </div> <div id="container-center"> <?php echo $column_left; ?><?php echo $column_right; ?> <div id="content"><?php echo $content_top; ?>  <script src="catalog/view/javascript/zoom/jquery.jqzoom-core.js" type="text/javascript"></script> <link rel="stylesheet" href="catalog/view/javascript/zoom/jquery.jqzoom.css" type="text/css"> <script type="text/javascript"> $(document).ready(function() { $('.jqzoom').jqzoom({ zoomType: 'standard', lens:true, preloadImages: false, alwaysOn:false }); }); </script>  <div class="product-info"> <?php if ($thumb || $images) { ?> <div class="left"> <?php $zoomHow = 1; if ($zoomHow == 1) {?> <?php if ($thumb) { ?> <div class="image"> <div id="wrap"> <a href="<?php echo $popup; ?>"class="jqzoom" rel='gal1" id="zoomFull" rel="position: 'inside' ,showTitle: false, adjustX:0, adjustY:0" style="position: relative; display: block;"> <img src="<?php echo $thumb; ?>" id="image" style="display: block;" /> </a> </div> <div class="cloud_zoom_about"><?php echo $cloud_zoom_about; ?></div> <div class="cloud_zoom_lupe"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-in colorbox " id="zoomFull" rel="colorbox"><i class="icon-zoom-in"></i></a></div> </div> <?php } ?> <?php if ($images) { ?> <div class="image-additional"> <div id="carousel1"> <ul class="jcarousel-skin-additional"> <li><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery cloud-zoom-in-gallery" rel="useZoom: 'zoomFull', smallImage: '<?php echo $thumb; ?>' "><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoomFull', smallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> </div> <script type="text/javascript"></script> </div> <?php foreach ($images as $image) { ?> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"></a> <?php } ?> <?php } ?> <?php } else { ?> <?php if ($thumb) { ?> <div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></div> <?php } ?> <?php if ($images) { ?> <div class="image-additional"> <div id="carousel1"> <ul class="jcarousel-skin-additional"> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> </div> <script type="text/javascript"></script> </div> <?php } ?> <?php } ?> </div> <?php } ?> <div class="right"> <div class="shadowProductInfo"></div> <div class="review float-right"> <div><img src="catalog/view/theme/bigdesfashion/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" /><br /> <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a><br /><a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a></div> <?php if ($mimage) { ?> <a href="<?php echo $manufacturers; ?>"><img src="<?php echo $mimage; ?>" title="<?php echo $manufacturer; ?>" /></a> <?php } ?> </div> <h1><?php echo $heading_title; ?></h1> <?php if ($price) { ?> <div class="price"> <?php if (!$special) { ?> <?php echo $price; ?> <?php } else { ?> <span class="price-new"><?php echo $special; ?></span><span class="price-old"><?php echo $price; ?></span> <?php } ?> <br /> <?php if ($tax) { ?> <span class="price-tax"><?php echo $text_tax; ?> <?php echo $tax; ?></span><br /> <?php } ?> <?php if ($points) { ?> <span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span><br /> <?php } ?> <?php if ($discounts) { ?> <br /> <div class="discount"> <?php foreach ($discounts as $discount) { ?> <?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?><br /> <?php } ?> </div> <?php } ?> </div> <?php } ?> <div class="description"> <?php if ($manufacturer) { ?> <span><?php echo $text_manufacturer; ?></span> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a><br /> <?php } ?> <span><?php echo $text_model; ?></span> <?php echo $model; ?><br /> <?php if ($reward) { ?> <span><?php echo $text_reward; ?></span> <?php echo $reward; ?><br /> <?php } ?> <span><?php echo $text_stock; ?></span> <?php echo $stock; ?> </div> <?php if ($options) { ?> <div class="options"> <?php foreach ($options as $option) { ?> <?php if ($option['type'] == 'select') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?> </b> <div class="float-left"> <select name="option[<?php echo $option['product_option_id']; ?>]"> <option value=""><?php echo $text_select; ?></option> <?php foreach ($option['option_value'] as $option_value) { ?> <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </option> <?php } ?> </select> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'radio') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?> </b> <div class="float-left"> <?php foreach ($option['option_value'] as $option_value) { ?> <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label> <br /> <?php } ?> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'checkbox') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?> </b> <div class="float-left"> <?php foreach ($option['option_value'] as $option_value) { ?> <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label> <br /> <?php } ?> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'image') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <table class="option-image"> <?php foreach ($option['option_value'] as $option_value) { ?> <tr> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label></td> </tr> <?php } ?> </table> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'text') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span> <?php } ?></b> <div class="float-left"> <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" /> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'textarea') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <textarea name="option[<?php echo $option['product_option_id']; ?>]" cols="40" rows="5"><?php echo $option['option_value']; ?></textarea> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'file') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <input type="button" value="<?php echo $button_upload; ?>" id="button-option-<?php echo $option['product_option_id']; ?>" class="button"> <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" /> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'date') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="date" /> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'datetime') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="datetime" /> </div> </div> <br /> <?php } ?> <?php if ($option['type'] == 'time') { ?> <div id="option-<?php echo $option['product_option_id']; ?>" class="option"> <b><?php echo $option['name']; ?>: <?php if ($option['required']) { ?><span class="required">*</span><?php } ?></b> <div class="float-left"> <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" /> </div> </div> <br /> <?php } ?> <?php } ?> </div> <?php } ?> <div class="cart"> <div class="boxCount"> <b><?php echo $text_qty; ?></b> <span class="icoMinus" onclick="jQuery(this).next().val( (parseInt(jQuery(this).next().val())-1)<1 ?1 : (parseInt(jQuery(this).next().val())-1));"> </span> <input type="text" name="quantity" class="input" size="2" value="<?php echo $minimum; ?>" /> <span class="icoPlus" onclick="jQuery(this).prev().val(parseInt(jQuery(this).prev().val())+1);"></span> <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" /> <?php if ($minimum > 1) { ?> <div class="minimum"><?php echo $text_minimum; ?></div> <?php } ?> </div> <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> <span class="wishlist-box"><a onclick="addToWishList('<?php echo $product_id; ?>');" class="button-sub button-wishlist" ><?php echo $button_wishlist; ?></a></span> <a onclick="addToCompare('<?php echo $product_id; ?>');" class="button-sub" style="display:none" ><?php echo $button_compare; ?></a> </div> <?php if ($review_status) { ?> <div class="review"> <div class="share"> <div class="addthis_default_style addthis_32x32_style"> <a class="addthis_button_vk" title="VKontakte"></a> <a class="addthis_button_mymailru" title="Mail.ru"></a> <a class="addthis_button_odnoklassniki_ru" title="Odnoklassniki" ></a> <a class="addthis_button_facebook" title="Facebook"></a> <a class="addthis_button_twitter" title="Twitter" ></a> <a class="addthis_button_google" title="Google" ></a> <a class="addthis_button_email" title="e-mail"></a> <a class="addthis_button_print" title="Print"></a> </div> <script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js"></script>  </div> </div> <?php } ?> </div> </div> <div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?></a> <?php if ($attribute_groups) { ?> <a href="#tab-attribute"><?php echo $tab_attribute; ?></a> <?php } ?> <?php if ($review_status) { ?> <a href="#tab-review"><?php echo $tab_review; ?></a> <?php } ?> </div> <div id="tab-description" class="tab-content"><?php echo $description; ?></div> <?php if ($attribute_groups) { ?> <div id="tab-attribute" class="tab-content"> <table class="attribute"> <?php foreach ($attribute_groups as $attribute_group) { ?> <thead> <tr> <td colspan="2"><?php echo $attribute_group['name']; ?></td> </tr> </thead> <tbody> <?php foreach ($attribute_group['attribute'] as $attribute) { ?> <tr> <td><?php echo $attribute['name']; ?></td> <td><?php echo $attribute['text']; ?></td> </tr> <?php } ?> </tbody> <?php } ?> </table> </div> <?php } ?> <?php if ($review_status) { ?> <div id="tab-review" class="tab-content"> <div id="review"></div> <h2 id="review-title"><?php echo $text_write; ?></h2> <b><?php echo $entry_name; ?></b><br /> <input type="text" name="name" value="" /> <br /> <br /> <b><?php echo $entry_review; ?></b> <textarea name="text" cols="40" rows="8" style="width: 98%;"></textarea> <span style="font-size: 11px;"><?php echo $text_note; ?></span><br /> <br /> <b><?php echo $entry_rating; ?></b> <span><?php echo $entry_bad; ?></span>  <input type="radio" name="rating" value="1" />   <input type="radio" name="rating" value="2" />   <input type="radio" name="rating" value="3" />   <input type="radio" name="rating" value="4" />   <input type="radio" name="rating" value="5" />  <span><?php echo $entry_good; ?></span><br /> <br /> <b><?php echo $entry_captcha; ?></b><br /> <input type="text" name="captcha" value="" /> <br /> <img src="index.php?route=product/product/captcha" alt="" id="captcha" /><br /> <br /> <div class="buttons"> <div class="right"><a id="button-review" class="button"><?php echo $button_continue; ?></a></div> </div> </div> <?php } ?> <?php if ($products) { ?> <script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; jQuery(document).ready(function() { jQuery('#special-products').jcarousel({ auto: 4, wrap: null, initCallback: mycarousel_initCallback }); }); </script> <div class="box-module"> <div class="box-heading-module"><?php echo $tab_related; ?></div> <div class="box-content-module"> <ul id="special-products" class="box-product jcarousel-skin-tango"> <?php foreach ($products as $product) { ?> <li> <?php if ($product['special']) { ?><div class="ifsale"><a href="<?php echo $product['href']; ?>" class="ico-sale"><span class="shadowSale"></span>-<?php echo $product['percent']; ?>%</a></div><?php } ?> <?php if ($product['thumb']) { ?> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <?php } else {?> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="/image/nofoto.jpg" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <?php } ?> <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div> <?php if ($product['price']) { ?> <div class="price"> <?php if (!$product['special']) { ?> <?php echo $product['price']; ?> <?php } else { ?> <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span> <?php } ?> </div> <?php } ?> <?php if ($product['rating']) { ?> <div class="rating"><img src="catalog/view/theme/bigdesfashion/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div> <?php } ?> <div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a></div> </li> <?php } ?> </ul> </div> </div> <?php } ?> <?php if ($tags) { ?> <div class="tags"><b><?php echo $text_tags; ?></b> <?php for ($i = 0; $i < count($tags); $i++) { ?> <?php if ($i < (count($tags) - 1)) { ?> <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>, <?php } else { ?> <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a> <?php } ?> <?php } ?> </div> <?php } ?> <?php echo $content_bottom; ?></div> <script type="text/javascript"></script> <script type="text/javascript"></script> <?php if ($options) { ?> <script type="text/javascript" src="catalog/view/javascript/jquery/ajaxupload.js"></script> <?php foreach ($options as $option) { ?> <?php if ($option['type'] == 'file') { ?> <script type="text/javascript"></script> <?php } ?> <?php } ?> <?php } ?> <script type="text/javascript"></script> <script type="text/javascript"></script> <script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script> <script type="text/javascript"></script> <?php echo $footer; ?>

nikfakel · 19 апр 2014

Всего одна строчка CCS3 =)
Код:
img:hover {transform: scale(1.5,1.5);-webkit-transform:scale(1.5,1.5); transition: all 0.5s ease 0.3s; box-shadow: 0 0 4px rgba(0,0,0,0.5); }
Жаль, старые браузеры не поймут.... (

butikstickerov · 19 апр 2014

Это не совсем то,что хотел nikfakel..

Zoom эффект при наведении на изображение

butikstickerov

cereberlum

butikstickerov

nikfakel

butikstickerov