web-dev-qa-db-ja.com

Fancyboxを開く代わりに、ウコマースのサムネイルをメイン画像に置き換える

単一の製品ページのメイン画像の下にあるサムネイルをクリックしたとき、またはホバーしたときにメイン画像を置き換えることを希望します。今のところ、サムネイルは自分のファンシーボックスで開いています。これはほとんどの大規模なeコマースサイトでは非常に一般的な機能であり、それがwoocmerceのオプションではないことは奇妙なことです。任意の助けは大歓迎です。

pluginsthumbnails
4
Sam

私は自分自身でその効果を達成したところです。他の人がこのスレッドを見つけた場合に備えて、ここに投稿します。

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からサイズを削除して、サムネイルではなくフル画像を返します。あなた自身のサムネイルサイズとそれを取り替えなさい。

私の解決策は以下に基づいています。

6
Gastón Labarthe

JavaScriptソリューション

元の答えはすでに文字列置換ではうまくいきますが、それぞれのユースケースに合わせて変更しなければならないので、ここでは fast Regex .test()を使うデフォルトの方法を使った回避方法をまとめました。 （リンクをたどるような）出来事からのイベント。

このプラグインはxで区切られた2〜4桁の数字の最初の出現を削除し、その後に2〜4桁の数字が続きます。いくつかの例

image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext

これが実際のプラグインです。あなたはただ一つのビットを記入する必要があるでしょう：実際のセレクタ。

すること： あなたがしなければならない唯一のことはイメージのためのあなたの実際のセレクタを提供することです（.class-of-the-thumbnail-imageの代わりに）。最善の方法は、（a）何らかのクラスを入力してから、サムネイルにフィルタを追加して、ターゲットにするすべての画像にこのクラスを追加することです。

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Full image size */

add_action( 'wp_footer', 'wpse83993FullImageSize' );
function wpse83993FullImageSize()
{
    ?>
    <script type="text/javascript">
( 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 );
    </script>
    <?
}

プラグインがフックできる可能性がある1つのポイントは、これをpost_thumbnail_htmlのフィルターと組み合わせることです。このフィルタにはいくつかの引数があります：$html, $post_id, $post_thumbnail_id, $size, $attrはHTMLを変更するために使用できます。

もう1つの方法は、wp_get_attachment_image()によって呼び出される、get_the_post_thumbnail()内のwp_get_attachment_image_attributes-フィルタで、それ自体がthe_post_thumbnail()でラップされています。

apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );

上記のプラグインに次のようなものを追加するだけです。

add_filter( 'wp_get_attachment_image_attributes', 'wpse83993AddDefaultThumbnailClass', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
    $atts['class'] .= "class-of-the-thumbnail-image";
    return $atts;
}

サーバーサイドソリューション：PHP

他の何よりもはるかに簡単なのは、次のフィルタを使用することです。

apply_filters( 'post_thumbnail_size', $size );

あなたはすべての投稿のサムネイルのフルサイズを呼び出すだけで追加することができ、あなたは大丈夫です。それからCSSで画像を縮小してください。

4
kaiser

WordpressがWordpress 4.4でレスポンシブ画像を実装した後、これらの他のスクリプトは追加されたsrcset属性のためにバグが多い/動作しない傾向があります。

これが私がこれに関する問題を解決するのに使用する抜粋です：

$(document).on('click', '.thumbnails .zoom', function() {
    var photo_fullsize = $(this).find('img').attr('src').replace('-180x180','');
    var photo_srcset = $(this).find('img').attr('srcset').replace('-180x180','');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('.woocommerce-main-image img').attr('srcset', photo_srcset);
    return false;
});
1
turtledropbomb

私は受け入れられた答えからの例を使用することに問題があったので、誰かがサムネイルのサイズの置き換えに依存しない実用的な例を必要とする場合のjJustをそれを少し書き直しました。

$(".thumbnails").find("a.zoom").unbind('click');
$('.thumbnails .zoom').on('click', function(e){
    console.log( $('.thumbnails .zoom') );
    var photo_fullsize =  $(this).attr('href');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('a.woocommerce-main-image').attr('href', photo_fullsize);
    return false;
});
0
Jeppe

私はこれを見つけました http://www.magictoolbox.com/magiczoomplus/ そしてそれは私が必要としていたものを処理します。ズームを内側に設定してズームウィンドウを開かないようにして、メイン画像の代わりにサムネイルホバーを使用しています。たぶんこれは似たような問題を抱えている誰かに役立つかもしれません。

0
Sam