Rotació de Imatges 360º on hover

	Imatge	Peu Imatge
1

1 Banner

Configuració

Ocupa total l'amplada

SíNo

Mostrar el títol del Post a sobre del banner?

On mostrar els textos i enllaços?

Dreta
Esquerra
Mig

Color Enllaç

Contingut

Imatge Banner

Títol

Contingut

Enllaç

Escolliu l’enllaç

2 Block de Contingut (text)

Contingut

3 Block codi

Tipus Codi

Codi JS

$(document).ready(function () {
    var en_moviment = false;
    var el_moviment = setTimeout(function() { return false}, 500);
    $(".nota-moviment .imagesequence").mouseenter(function () {
        var data = [];
        data.prod_id = $(this).attr("data-id");
        data.total_img = ($(this).attr('data-total') - 1);
        openMovmentImage($(this), data);
    }).mouseleave(function () {
        closeMovmentImage(el_moviment);
    });

    function closeMovmentImage(el_moviment) {
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
        clearTimeout(el_moviment);
        en_moviment = false;
        return false;
    }

    function openMovmentImage(element, data) {
        $(element).find('img.in_movment_rotate').each(function (index) {
            (function (that, i) {
                if (!en_moviment) {
                    el_moviment = setTimeout(function () {
                        en_moviment = true;
                        if (en_moviment) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=" + i + "]").addClass("active");
                        } else {
                            closeMovmentImage(el_moviment);
                            clearTimeout(el_moviment);
                        }

                        if (i == data.total_img) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                        }
                    }, 500 * i);
                } else {
                    $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                    $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                }
            })($(this), index);
        });
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
    }
});

Codi CSS

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

4 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

5 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

	Imatge	Peu Imatge
1

1 Banner

Configuració

Ocupa total l'amplada

SíNo

Mostrar el títol del Post a sobre del banner?

On mostrar els textos i enllaços?

Dreta
Esquerra
Mig

Color Enllaç

Contingut

Imatge Banner

Títol

Contingut

Enllaç

Escolliu l’enllaç

2 Block de Contingut (text)

Contingut

3 Block codi

Tipus Codi

Codi JS

$(document).ready(function () {
    var en_moviment = false;
    var el_moviment = setTimeout(function() { return false}, 500);
    $(".nota-moviment .imagesequence").mouseenter(function () {
        var data = [];
        data.prod_id = $(this).attr("data-id");
        data.total_img = ($(this).attr('data-total') - 1);
        openMovmentImage($(this), data);
    }).mouseleave(function () {
        closeMovmentImage(el_moviment);
    });

    function closeMovmentImage(el_moviment) {
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
        clearTimeout(el_moviment);
        en_moviment = false;
        return false;
    }

    function openMovmentImage(element, data) {
        $(element).find('img.in_movment_rotate').each(function (index) {
            (function (that, i) {
                if (!en_moviment) {
                    el_moviment = setTimeout(function () {
                        en_moviment = true;
                        if (en_moviment) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=" + i + "]").addClass("active");
                        } else {
                            closeMovmentImage(el_moviment);
                            clearTimeout(el_moviment);
                        }

                        if (i == data.total_img) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                        }
                    }, 500 * i);
                } else {
                    $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                    $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                }
            })($(this), index);
        });
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
    }
});

Codi CSS

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

4 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

5 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

	Imatge	Peu Imatge
1

1 Banner

Configuració

Ocupa total l'amplada

SíNo

Mostrar el títol del Post a sobre del banner?

On mostrar els textos i enllaços?

Dreta
Esquerra
Mig

Color Enllaç

Contingut

Imatge Banner

Títol

Contingut

Enllaç

Escolliu l’enllaç

2 Block de Contingut (text)

Contingut

3 Block codi

Tipus Codi

Codi JS

$(document).ready(function () {
    var en_moviment = false;
    var el_moviment = setTimeout(function() { return false}, 500);
    $(".nota-moviment .imagesequence").mouseenter(function () {
        var data = [];
        data.prod_id = $(this).attr("data-id");
        data.total_img = ($(this).attr('data-total') - 1);
        openMovmentImage($(this), data);
    }).mouseleave(function () {
        closeMovmentImage(el_moviment);
    });

    function closeMovmentImage(el_moviment) {
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
        clearTimeout(el_moviment);
        en_moviment = false;
        return false;
    }

    function openMovmentImage(element, data) {
        $(element).find('img.in_movment_rotate').each(function (index) {
            (function (that, i) {
                if (!en_moviment) {
                    el_moviment = setTimeout(function () {
                        en_moviment = true;
                        if (en_moviment) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=" + i + "]").addClass("active");
                        } else {
                            closeMovmentImage(el_moviment);
                            clearTimeout(el_moviment);
                        }

                        if (i == data.total_img) {
                            $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                            $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                        }
                    }, 500 * i);
                } else {
                    $("img.in_movment[data-prod=" + data.prod_id + "]").removeClass("active");
                    $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
                }
            })($(this), index);
        });
        $("img.in_movment_rotate").removeClass("active");
        $("img.in_movment_rotate[data-prod=" + data.prod_id + "][data-gal=0]").addClass("active");
        $("img.in_movment_rotate[data-gal=0]").addClass("active");
    }
});

Codi CSS

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

4 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

<div class="contenidor-list">
                    <ul>
                        <?php foreach ($productes as $keyP => $producte) :
                            $thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id($producte->ID), 'full');
                            $url = get_permalink($producte->ID);
                            $wp_prod = new WC_product($producte->ID);
                            $galeria = $wp_prod->get_gallery_image_ids();
                        ?>
                            <li>
                                <div class="contenidor-img">
                                    <div class="nota-moviment">
                                        <div class="spacer s<?php echo $keyP; ?>" id="trigger"></div>
                                        <a href="<?php echo_empty($url); ?>">
                                            <div id="imagesequence_<?php echo $keyP; ?>" class="imagesequence imagesequence_<?php echo $keyP; ?>" data-id="<?php echo $producte->ID; ?>" data-total="<?php echo count($galeria); ?>">
                                                <?php if (!empty($galeria) || count($galeria) > 1) : ?>
                                                    <?php foreach ($galeria as $kgal => $gal) : ?>
                                                        <img class="in_movment in_movment_rotate <?php echo ($kgal == 0) ? 'active' : ''; ?> <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" data-id="<?php echo $keyP; ?>" data-gal="<?php echo $kgal; ?>" data-total="<?php echo count($galeria); ?>" data-prod="<?php echo $producte->ID; ?>" src="<?php echo_empty(wp_get_attachment_url($gal)); ?>">
                                                    <?php endforeach; ?>
                                                <?php
                                                else : ?>
                                                    <img class="in_movment <?php echo ($producte->imatge_petita) ? "resizeimg" : ""; ?>" id="myimg_<?php echo $keyP; ?>" src="<?php echo_empty($thumbnail); ?>">
                                                <?php endif; ?>
                                            </div>
                                        </a>
                                    </div>
                                    <!-- <a href="<?php echo_empty($url); ?>">
                                        <img <?php echo ($producte->imatge_petita) ? "class=resizeimg" : ""; ?> src="<?php echo_empty($thumbnail); ?>" alt="">
                                    </a> -->
                                </div>
                                <div class="contenidor-cnt">
                                    <a class="link" href="<?php echo_empty($url); ?>"> <span class="under-line-blk"><?php echo_empty($producte->post_title); ?></span></a>
                                    <a href="<?php echo_empty($url); ?>" class="dis-but"><?php _e("Discover", "esperitroca"); ?></a>
                                </div>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

5 Block codi

Tipus Codi

Codi JS

Codi CSS

div.imagesequence { display: flex; }
.contenidor-list ul li .contenidor-img .nota-moviment img, .contenidor-list1 ul li .contenidor-img .nota-moviment img { width: 100%; float: left; transition: all .5s ease; }
.contenidor-list ul li .contenidor-img .nota-moviment  img, .contenidor-list1 ul li .contenidor-img .nota-moviment  img { max-height: 500px; min-height: 400px; object-fit: contain; }
.contenidor-list ul li .contenidor-img .nota-moviment img.active, .contenidor-list1 ul li .contenidor-img .nota-moviment img.active { display: block; }
#imagesequence img { transition: all 0.5s ease;}
img.in_movment.in_movment_rotate { display: none; }

Codi PHP

Codi HTML

Rotació de Imatges 360º on hover - (Informàtica, jQuery, Wordpress)

Rotació de Imatges 360º on hover

Deixa un comentari Cancel·la les respostes