Problème avec le plugin bgStreatcher

Question

hokano

19 Jul 2013 à 12:37

Bonjour à tous,

je ne m'y connais pas trop en jquery et j'avais besoin d'un background slideshow j'ai trouvé bgStreatcher http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html.

Le slideshow fonctionne bien et agit sur le body de mon site mais moi je veux qu'il agisse sur un div alors je vérifie si c'est possible sur le site des développeurs du plugin et c'est faisable simplement en changent le nom de la balise ici:

 $('body').bgStretcher

donc en retirant body et en mettant la class de mon div.

Et c'est là qu'il y a un problème, ça ne fonctionne pas sur la div voulu mais sur d'autre comme la barre de navigation pas de problème.

donc j'aimerais votre aide pour régler ça.

voilà une partie de mon code, le div dans le quel le background doit fonctionner est celle avec la class Home:


        <script type="text/javascript">
                    $(document).ready(function(){
                    
                        //  Initialize Backgound Stretcher	   
                        $('body').bgStretcher({
                            images: ['design/bkg1.jpg', 'design/bkg2.jpg', 'design/bkg3.jpg'],
                            imageWidth: 1920, 
                            imageHeight: 1080, 
                            slideDirection: 'N',
                            slideShowSpeed:  2000,
                            transitionEffect: 'fade',
                            nextSlideDelay:7000,
                            sequenceMode: 'normal',
                            buttonPrev: '#prev',
                            buttonNext: '#next',
                            pagination: '#nav',
                            anchoring: 'left center',
                            anchoringImg: 'left center'
                        });
                        
                    });
                </script>
</head>

<body>
    <div class="bloc">
        <div class="title">
            <a id="logo" href="#accueil">Elax</a>
            <div class="tabs" id="tabs1">
                <a href="#accueil">Accueil</a>
                <a href="#realisations">Nos réalisations</a>
                <a href="#about">Qui sommes-nous?</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
        
        <div id="content">
            <div class="home">
                <div class="social">
                    <div class="fb">
                        <a id="iconfb" href="#" title="Bilal Souir web design">
                        <img src="design/fb.png" alt="Facebook"/>
                        <span id="desfb">Facebook</span>
                        </a>
                    </div>
                    
                    <div style="clear:both;"></div>
                    
                    <div class="gplus">
                        <a id="icong+" href="#" title="Bilal Souir web design">
                        <img src="design/g+.png" alt="Facebook"/>
                        <span id="desg+">Google +</span>
                        </a>
                    </div>
                    
                    <div style="clear:both;"></div>
                    
                    <div class="twt">
                        <a id="icontwt" href="#" title="Bilal Souir web design">
                        <img src="design/twt.png" alt="Facebook"/>
                        <span id="destwt">Twitter</span>
                        </a>
                    </div>
                </div>
                
                <div class="description">
                    <h1 id="titre">Un interieur qui vous ressemble.</h1>
                    <h2>Du conseil à la réalisation, une de nos équipe vous accompagne tout au long de votre projet.</h2>
                        
                    <h3>Aménagez votre maison ou votre espace de travail pour profiter au mieux d’un large éventail artistique et ainsi bénéficier du lieu adapté.</h3>
                        
                   <h4>Que vous soyez un particulier ou une entreprise, l’agence Elax vous propose des solutions qui comblerons vos besoins.</h4>
                </div>
            </div>

Si quelqu'un a une solution je suis preneur.

Merci d'avance.

Sujet clos

JavaScript, DOM et API Web HTML5

Problème avec le plugin bgStreatcher