bigcartelでマウスを動かすと画像上の領域を拡大する

Question

私はNO SHAPEであるかコーダーを形成していますが、今後数週間以内に出る予定のBigCartelサイトにいくつか調整を加えました。私は衣料品のラインを持っていて、製品を選択した消費者が製品のイメージ上にマウスを置いて拡大して見ることができるようにしたかったのです...（ここではナイキの例です：http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220）消費者がクリックした画像/製品を作るためにどのコードを使用するのかを知りたいと思っていましたが、特定の領域をホバリングしたときに大きく/拡大しています...コードをアップロードしたのを見ましたが、それをカスタムコーディングに挿入するのに不思議に思っていました。私はCSSオプションとHTMLを持っていて、 "製品"またはすべてのコーディングに行くべきかどうかわかりません...（新人質問に申し訳ありません）...

私も知りたいもし私もこの質問をスライドできれば）BigCartelサイトでスライドショーのスピードを上げ、ディゾルブオプションに変更する方法...そして、もう一度、そのコードをどこに挿入すればいいですか？

私はちょっとした変更を加えましたが、もう一度、私は甘くなく、いくつか追加調整があります。私は自分のサイトを「クッキーカッター」にしないことが大好きです。BigCartelの良い人、私にこのリンクを送って、検索して質問しました。あなたの助けをあらかじめありがとう！

Answer 1

あなたは、これは常に

$('.tile') 
    // tile mouse actions 
    .on('mouseover', function(){ 
     $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'}); 
    }) 
    .on('mouseout', function(){ 
     $(this).children('.photo').css({'transform': 'scale(1)'}); 
    }) 
    .on('mousemove', function(e){ 
     $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left)/$(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top)/$(this).height()) * 100 +'%'}); 
    }) 
    // tiles set up 
    .each(function(){ 
     $(this) 
     // add a photo container 
     .append('<div class="photo"></div>') 
     // some text just to show zoom level on current item in this example 
     .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>') 
     // set up a background image for each tile based on data-image attribute 
     .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'}); 
    }) 

HTML

<div class="tiles"> 
    <div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div> 
    <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div> 
    <div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div> 
    </div> 

CSS

JS私のため https://codepen.io/ccrch/pen/yyaraz

を働き、これを試してみました

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700); body { background: #fff; color: #000; margin: 0; } .tiles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile { position: relative; float: left; width: 33.333%; height: 100%; overflow: hidden; } .photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform .5s ease-out; } .txt { position: absolute; z-index: 2; right: 0; bottom: 10%; left: 0; font-family: 'Roboto Slab', serif; font-size: 9px; line-height: 12px; text-align: center; cursor: default; } .x { font-size: 32px; line-height: 32px; }