Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #247557

    Hi.
    See link: http://luxsyfashion.com/shop/thoi-trang-cong-so/dam-chu-a-cong-so/
    and if you like animation of images or plan to make similar animation then see solution blow. Lots of free source here: http://www.dynamicdrive.com/dynamicindex14/

    Changes to /wp-content/plugins/woocommerce/templates/single-product/product-thumbnails.php

    
    $columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 ); // changes to be made below this line
    
    $fimage_title 		= esc_attr( get_the_title( get_post_thumbnail_id() ) );
    $fimage_link  		= wp_get_attachment_url( get_post_thumbnail_id() );
    $fimage_link130x85 = str_replace(".jpg","-130x85.jpg",$fimage_link);
    echo (sprintf('<a href="%s" class="zoom" title="%s" data-rel="prettyPhoto[product-gallery]"><img width="130" height="85" src="%s" class="attachment-shop_thumbnail" alt="%s"></a>'
    , $fimage_link, $fimage_title, $fimage_link130x85, $fimage_title ));
    	
    foreach ( $attachment_ids as $attachment_id ) { // changes to be made above this line
    

    and finally some code lines to be inserted into header.php

    
    <script src="http://www.dynamicdrive.com/dynamicindex14/custom/translucentslideshow.js" type="text/javascript"></script>
    <script>
    jQuery(document).ready( function () {
    	var imglinks = jQuery(".thumbnails a").map(function() {return this.href;}).get();
    	if (imglinks.length > 0) {
    		imagelist = [];
    		for(i=0;i<imglinks.length;i++) {imglinks[i]=imglinks[i].replace('.jpg','-450x450.jpg');imagelist.push('["'+imglinks[i]+'"]');};
    		jQuery(".images a").first().wrap('<div id="featureimage"></div>');
    		jQuery.globalEval('var translideshow1=new translideshow({wrapperid: "featureimage", dimensions:[325, 325], imagearray:[' + imagelist + '], displaymode:{type:"auto", pause:4000, cycles:0, pauseonmouseover:true}, orientation:"v", persist:false, slideduration:1200})');
    	};
    });
    </script>
    • This topic was modified 6 months, 3 weeks ago by  ILikeMovies. Reason: Further explanation
    • This topic was modified 6 months, 3 weeks ago by  ILikeMovies. Reason: Further explanation
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies. Reason: Complete solution
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This topic was modified 6 months, 2 weeks ago by  ILikeMovies.
    #247612

     

    • This reply was modified 6 months, 3 weeks ago by  ILikeMovies.
    • This reply was modified 6 months, 3 weeks ago by  ILikeMovies. Reason: Further explanation
    • This reply was modified 6 months, 2 weeks ago by  ILikeMovies.
    • This reply was modified 6 months, 2 weeks ago by  ILikeMovies.
    #248528

    Hi!

    We aren’t really able to help with individual customization like this since the final solution and what we might suggest could go into a fairly lengthy code change.

    If its a must-have feature and you need further assistance we recommend hiring a freelance developer from either Envato Studio, Codeable or http://www.kriesi.at/contact/customization

    Cheers!
    Devin

    #248582

     

    • This reply was modified 6 months, 2 weeks ago by  ILikeMovies.
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Howto animate single product images with thumbnails – working codes’ is closed to new replies.