2

製品ページ用の小さな製品ギャラリーを作成しています。現在、4 つのサムネイル画像とメイン画像があります。サムネイル画像のいずれかをクリックすると、メイン画像がクリックされたサムネイル画像に置き換えられます。

ここにコードペンがあります.. http://codepen.io/anon/pen/oIzqj

私は近づいていると感じていますが、明らかにまだそこにはいません。

これが私のjQueryコードです...

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();

  var photo_fullsize =  $(this).find('img').attr('src');

  $('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');

});

私が見逃している/間違っていることを知りたいです。

ありがとう

4

6 に答える 6

4

$('.woocommerce-main-image img').attr('src', photo_fullsize);代わりに実行すると機能します$('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');。ここを参照してください: http://codepen.io/anon/pen/uatGg

于 2013-06-25T21:03:52.347 に答える
2

私にはうまくいきませんでした。

$('.thumbnails.zoom').click(関数(e){ e.preventDefault();

彼は自分の仕事をしていなかったので、私を画像に送りました。コードを変更することで効果を達成しました：

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });

.replace(-100x132)画像の URL から-100x132を削除して、前に説明したblackhawkのようにサムネイルではなく完全な画像を返します。

于 2013-08-20T13:54:19.993 に答える
1

私はすでにWPSEで非常によく似たものに答えたので...

一致する正規表現を使用しています

  • 必須ではないダッシュ
  • 2～4桁
  • Xセパレーター
  • 2～4桁

実際の機能はこちら。最初に正規表現を使用しtest()て速度を上げます。次に、実際の画像src属性を変更する前に文字列を置き換えます。

( function( $ ) {
    $( '.thumbnails .zoom' ).on( 'click', function( event ) {
        event.preventDefault();

        var $img = $( this ).find( 'img' ),
            $src = $img.attr( 'src' ),
            search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;

        // Regex .test() is fast, so we use it *before* we actually do something
        if ( search.test( $src ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
于 2013-11-04T03:46:23.703 に答える
1

アンドリューは良い出発点を提供してくれましたが、拡大した写真のピクセルの乱れが少なくなるように、さらに進んでください...

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();
  var photo_fullsize = $(this).find('img').attr('src').replace('150/200','500/500');
  $('.woocommerce-main-image img').attr('src',photo_fullsize);
});

...必要に応じて JavaScript の replace() メソッドの値を [500/500] に調整しますが、最初はこのコードをテストしてください。

于 2013-06-25T21:14:11.560 に答える
0

良い議論-上記のガストンのソリューションを使用して、ホバーイベントでこれを正常に機能させました。しかし、ページが読み込まれるときに、大きな画像が現在キャッシュされていない場合、それまでホバー効果が機能しないことに気付きました。ページの読み込み時に画像の大きなバージョンをキューに入れる方法はありますか?

于 2014-01-07T21:03:31.917 に答える