Forums Développement Multimédia

Aller au contenu

background fullscreen par clic

CODE HTML CSS

2 réponses à ce sujet

#1 eric

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 12 July 2012 - 10:29 AM

bonjour à tous,

J'ai une page sur laquelle j'affiche un background en fullscreen avec 5 boutons.
Actuellement la fonction javascript fonctionne, mais affiche un fond en fonction de ma balise "background" et tourne en boucle.

Je voudrais attribuer à chaque bouton un background en fonction d'une variable : bt1 - fond1, bt2 - fond2 etc.
mais je n'arrive pas à retrouver la ligne correspondant dans ma balise...

Merci de votre aide,

Eric.

css :

<style type="text/css">
div.toto{
        z-index:1000;
}
div.background {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        z-index:-1;
}
div.background:after {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 2;
content: '';
        background: transparent url(../images/pattern_1.png) repeat top left;
}
div.background img {
width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
}
div.background .show {
z-index:1
}
</style>
 
js:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function thebackground() {
        $('div.background img').css({opacity: 0.0});
        $('div.background img:first').css({opacity: 1.0});
}
function change(number_img) {
        var current = ($('div.background img.show')? $('div.background img.show') : $('div.background img:first'));
        alert(current.index());
        if ( current.length == 0 ){
                current = $('div.background img:first');
        }
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.background img:first') :current.next()) : $('div.background img:first'));

    next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

    current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
};
$(document).ready(function() {
        thebackground();
        $('div.background').fadeIn(1000); // works for all the browsers other than IE
        $('div.background img').fadeIn(1000); // IE tweak
});
</script>
 

html :

<div id="toto">
<a href="#" onclick="change(0);">image 0</a>
<a href="#" onclick="change(1);">image 1</a>
<a href="#" onclick="change(2);">image 2</a>
<a href="#" onclick="change(3);">image 3</a>
<a href="#" onclick="change(4);">image 4</a>
<a href="#" onclick="change(5);">image 5</a>           
</div>
<div class="background">
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
        <img src="images/5.jpg"/>
        <img src="images/6.jpg"/>
</div>
 


#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 20 July 2012 - 10:47 AM

Salut,

Le soucis vient du fait que la fonction "change( )" cherche systématiquement l'image suivante à afficher


var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.background img:first') :current.next()) : $('div.background img:first'));
 

Or, toi tu veux forcer l'affichage d'une certaine image.

Il suffit donc de sélectionner cette dernière en utilisant la fonction eq( )


var next = $("div.background img").eq(number_img) ;
 

note : lorsque tu postes du code, pense à l'encadrer des balises dédiées (bouton < >) dans l'éditeur de texte
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 eric

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 24 July 2012 - 13:00 PM

merci beaucoup de ton aide !! :smile:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP