javascript - déplacer une image à gauche en fonction de la taille de la fenêtre du navigateur

J'essaie d'utiliser le cycle jquery pour faire pivoter des images sur ma page. Les images ont une largeur de 1400 pixels, ce qui signifie que pour les personnes avec des résolutions d'écran plus petites, le côté droit de l'image finit par disparaître. Je veux faire en sorte que les images perdent une quantité égale de chaque côté de l'image et ainsi garder le centre de l'image au centre de la fenêtre de visualisation.javascript - déplacer une image à gauche en fonction de la taille de la fenêtre du navigateur

Si vous regardez http://renegadeox.com/ et redimensionnez la fenêtre de votre navigateur, vous verrez ce que je veux dire. Comment puis-je utiliser javascript pour déplacer l'image vers la gauche par rapport au conteneur et ainsi garder l'image centrée?

Voici le code complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.slideshowWrap').cycle({ 
      fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater 
     }); 
    }); 
    </script> 
    <div style="margin: 0 auto" class="slideshowWrap"> 
     <div class="homeslideshow"> 
      <img src="background_01.jpg" alt="" />  
     </div> 
     <div class="homeslideshow"> 
      <img src="background_02.jpg" alt="" />  
     </div> 
     <div class="homeslideshow"> 
      <img src="background_03.jpg" alt="" />  
     </div> 
    </div> 
</body> 
</html>

Source

2013-09-25 Zaphod Beeblebrox

vous pouvez utiliser les transitions personnalisées à partir du plug-in de cycle, pour définir votre propre méthode pour calculer la valeur correcte gauche vous pouvez utiliser ce code

EDIT

J'ai essayé ce code et cela fonctionne, mais cela ne fonctionne que sur l'événement de chargement, il ne fonctionne pas sur le redimensionnement, vous pourriez obtenir l'effet désiré si vous liez toute la fonction au redimensionnement e vent

vous devez également ajouter un peu css:

<style> 
.slideshowWrap{ 
    width:100% !important; 
    overflow:hidden; 
} 
</style>

Et voici les js qui ont fonctionné pour moi:

$(document).ready(function() { 
var leftVal = 0; 
    if($(window).width()<1400){ 
     leftVal = ((1400 - $(window).width())/2)*-1; 
    } 

    $('.slideshowWrap').cycle({ 
     fx:  'custom', 
     cssBefore: { 
      left: leftVal, 
      top: 0, 
      opacity: 1, 
    display: 'block' 
     }, 
     animOut: { 
      opacity: 0 
     }, 
     animIn: { 
      left: leftVal, 
      top: 0, 
     }, 
     cssAfter: { 
      zIndex: 0 
     }, 
    cssFirst: { 
    left: leftVal 
    }, 
     delay: -3000 
    }); 
}); 
</script>

je crois que le code ci-dessus vous donnera l'effet désiré , sinon au moins une idée de la façon d'accomplir cela, espérons que cela aide !! voici un lien vers la documentation complète sur le cycle personnalisé fx http://jquery.malsup.com/cycle/adv.html

Source

2013-09-25 20:50:19 javiercf

Salut javiercf - merci pour l'entrée . Je l'ai essayé, mais je n'arrive pas à le faire fonctionner. Je ne connais pas très bien javascript mais je comprends ce qui se passe ici, mais malheureusement pour moi la première image s'estompe et il n'y a plus rien. Plus la première image n'est pas centrée dans le milieu de la page en premier lieu :( –

Je viens d'éditer le code, vous où droit, ça n'a pas fonctionné, le nouveau fait l'affaire! – javiercf

Vous êtes un flipper génie Woohoo !! Cela fonctionne! Merci beaucoup. :) –

Avez-vous besoin d'avoir des images, pouvez-vous utiliser des images de fond? Pourquoi ne pas simplement utiliser css?

Il sera réactif, mais si vous voulez faire le plugin se redimensionner comme l'utilisateur change la taille des navigateurs - il devra être mis à jour sur l'événement de redimensionnement de la fenêtre.

Sinon, si quelqu'un avec faible res screeen ouvre la page, le curseur sera toujours 100% de leur écran et des images sera centrée (et « recadrée »)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
    <style type="text/css"> 
     .slideshowWrap { 
      width: 100%; 
      height: 500px; 
     } 
     .homeslideshow { 
      height: 100%; 
      width: 100%; 
     } 
     .slide1 { 
      background: url(background_01.jpg) no-repeat 50% 50%; 
     } 
     .slide2 { 
      background: url(background_02.jpg) no-repeat 50% 50%; 
     } 
     .slide3 { 
      background: url(background_03.jpg) no-repeat 50% 50%; 
     } 
     .homeslideshow img { display: none; } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.slideshowWrap').cycle({ 
       fx: 'fade', 
       slideResize: 0 
      }); 
     }); 
    </script> 
    <div style="margin: 0 auto" class="slideshowWrap"> 
     <div class="homeslideshow slide1"> 
      <img src="background_01.jpg" alt="" />  
     </div> 
     <div class="homeslideshow slide2"> 
      <img src="background_02.jpg" alt="" />  
     </div> 
     <div class="homeslideshow slide3"> 
      <img src="background_03.jpg" alt="" />  
     </div> 
    </div> 
</body> 
</html>

Source

2013-09-25 22:11:09 kasperoo

Merci pour la suggestion, mais j'ai essayé votre code - http://renegadeox.com/kasperoo.php - et cela fait passer l'image vers la droite. Je ne pense pas comprendre ce qui doit se passer. Qu'est-ce que je rate? –

Si vous avez un petit écran et ouvrez la page que vous venez de coupler, vous verrez que l'image sera centrée dans le curseur. Toutefois, si vous redimensionnez votre navigateur, vous devrez mettre à jour le plugin car il ne répondra pas. – kasperoo

désolé, un autre commentaire - J'ai ajouté l'option {slideResize: 0} à ma réponse, ce qui rend le tout réactif et j'espère que ce que vous cherchez. – kasperoo

javascript - déplacer une image à gauche en fonction de la taille de la fenêtre du navigateur

Répondre

Questions connexes