Sticky image

[sebsimappus]

Bonjour,

Je viens vers vous afin d'avoir de l'aide pour mettre une image en sticky, je cherche depuis un moment et je comprends pas pourquoi cela ne fonctionne pas.

Mille mercis par avance.

<div id="content-wrapper" class="col-lg-12 col-xs-12 js-content-wrapper">
    <section id="main" class="product-detail product_image_thumbs_bottom product-image-thumbs product-thumbs-bottom">
        <div class="row">
            <div class="col-form_id-form_9367402777406408 col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12">
                <div class="sticky">
                    <section
                        class="page-content"
                        id="content"
                        data-templateview="bottom"
                        data-numberimage="5"
                        data-numberimage1200="5"
                        data-numberimage992="4"
                        data-numberimage768="3"
                        data-numberimage576="3"
                        data-numberimage480="2"
                        data-numberimage360="2"
                        data-templatemodal="0"
                        data-templatezoomtype="none"
                        data-zoomposition="right"
                        data-zoomwindowwidth="400"
                        data-zoomwindowheight="400"
                        data-use_leo_gallery="0"
                    >
                        <div class="images-container">
                            <div class="product-cover">
                                <ul class="product-flags"></ul>

                                <img
                                    id="zoom_product"
                                    data-type-zoom=""
                                    class="js-qv-product-cover img-fluid"
                                    src="xl.jpg"
                                    alt=""
                                    title=""
                                    loading="lazy"
                                />
                                <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal" style="display: none;">
                                    <i class="material-icons zoom-in"></i>
                                </div>
                            </div>

                            <div id="thumb-gallery" class="product-thumb-images elementor-slick-slider slick-initialized slick-slider has-arrows" style="display: block;">
                                <div class="slick-list draggable">
                                    <div class="slick-track" style="opacity: 1; width: 2055px; transform: translate3d(0px, 0px, 0px);">

                                    </div>
                                </div>

                                <div class="slick-arrows">
                                    <button class="slick-prev slick-arrow slick-disabled" aria-label="Previous" type="button" aria-disabled="true" style="">Previous</button>
                                    <button class="slick-next slick-arrow" aria-label="Next" type="button" style="" aria-disabled="false">Next</button>
                                </div>
                            </div>

                            <div class="arrows-product-fake slick-arrows">
                                <button class="slick-prev slick-arrow" aria-label="Previous" type="button">Previous</button>
                                <button class="slick-next slick-arrow" aria-label="Next" type="button">Next</button>
                            </div>
                        </div>
                    </section>

                    <div class="modal fade js-product-images-modal" id="product-modal">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                </div>
            </div>
            <div class="col-form_id-form_15874367062488778 col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12 col-sp-12">
                <div class="">
                    <h1 class="h1 product-detail-name">Produit</h1>
                </div> 
            </div>
        </div>

        <footer class="page-footer">
            <!-- Footer content -->
        </footer>
    </section>
</div>

 

[Ariane Web et Plus]

Bonjour il faut être plus précis.

Que voulez-vous faire ? Vous êtes sur quelle version de ps quel thème ?

Vous nous montrez du html alors que le langage utilisé sur ps est smarty

[sebsimappus]

Bonjour,

Merci pour votre retour, nous sommes sous prestashop 8.0.4 avec le thème suivant :

https://demo80.leotheme.com/prestashop/leo_hnice_demo/en/men/1-hummingbird-printed-t-shirt.html?layout=detail1699564001

Nous avons totalement fait la mise en place des blocs à droite, donc l'idéal est de pouvoir mettre l'image du produit en sticky pour un défilement vers le bas.

Merci par avance

Edited June 23, 2023 by sebsimappus (see edit history)