J'ai une configuration de la solution de vol stationnaire avec CSS. Cependant, les images de Hover ne respectent pas la fenêtre et finissent donc par l'affichant en dehors de celui-ci. J'ai planifié simplement de créer de nouvelles classes spécifiant le décalage en fonction de l'emplacement de l'image dans ma conception, mais je ne peux pas contrôler la résolution que l'utilisateur utilise, je pensais qu'il devrait y avoir un moyen de forcer la navigation à afficher à l'intérieur la fenêtre. Est-ce que quelqu'un a une idée sur la façon dont je puisse faire cela?
J'ai le CSS suivant: P>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
6 Réponses :
Essayez la Tool Tool de jQuery:
Voici un exemple selon votre demande: strong>
http://jsfiddle.net/cadence96/3x2ez/ P>
http://docs.jquerery.com/plugins/tooltip
http://jquery.bassistance.de/tooltip/demo/
P >
1) Dans la <ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
C'est une bonne réponse, mais elle introduit un tout nouveau ensemble de problèmes. J'aurais besoin de retirer la transparence de fond et de définir les images décalées pour apparaître du coin supérieur de l'image. Je ne vois pas comment aborder l'une de ces questions dans la documentation. :/ Merci!
J'ai créé un plugin sur mesure pour vous!
http://jsfiddle.net/adaz/ Taecz / P>
Eh bien, c'est assez basique mais je pense que cela répond à vos critères. Vous pouvez l'activer de deux manières: p>
1) Si vous ne pouvez pas être dérangé sur la création de vignettes pour chaque image, vous pouvez simplement énumérer vos images comme ceci: P>
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
Adaz - Ceci est assez proche de ce que Istock a et c'est génial! Le seul autre problème majeur est que cela ne traite pas du problème de la fenêtre de vue qui a lancé cette question. Une fois que j'ai ajouté une largeur dans le conteneur UL et un peu d'espacement du LIS pour arrêter la boîte à défilement Jsfiddle, l'image affichée sur VOIR apparaît toujours en dehors de la fenêtre. Suggestions? (BTW, écrire quelque chose pour moi est au-delà et au-delà - je vous remercie pour cela! +1 à vous!)
Pas de soucis! Je ne suis pas sûr de quoi voulez-vous dire exactement, pourriez-vous m'envoyer votre violon? J'ai fait quelques améliorations, peut-être que cela triera votre problème: jsfiddle.net/adaz/taecz/1 < / a>
Adaz - Votre dernier violon corrige le problème dont je parlais auparavant. Cela fonctionne bien si je n'ai pas besoin de le changer de la mise en œuvre par défaut que vous avez créée, mais lorsque j'ai essayé d'ajouter des options comme suggéré, j'ai eu une erreur "jeton inattendue". J'ai pris ce que tu travaillais avec et j'ai créé un violon qui imiterait plus ce que je fais à ma fin. Toujours obtenir cette même erreur, ainsi que le vol stationnaire ne restant pas dans la fenêtre sur le côté droit et vous réécrivez sous le texte que j'ai besoin de garder dans les balises LI: jsfiddle.net/ywickham/g7tdq/4
Hey Yazmin, je viens de faire plus d'améliorations, vous pouvez maintenant voir que j'utilise des options personnalisées: jsfiddle.net/adaz / RZ2VH - Plutôt que de spécifier la marge laissée dans le CSS, j'ai ajouté des options pour le décalage de l'info-bulle et la gauche. Voici un exemple de la deuxième mise en œuvre de mon plugin: jsfiddle.net/adaz/avyxe . Au cas où vous êtes perdu, voici où vous définissez des options: $ ("# istockwannabe"). Istockwannabe ({thumbmaxwidth: 50, thumbmaxheight: 50, TooltiPoffset: {TOP: 0, GAUCHE: 120}});
J'ai développé un script, dans le JS, vous pouvez modifier la largeur du conteneur.
Voici le violon: http://jsfiddle.net/cadence96/ggdqh/
mis à jour, fonctionne maintenant dans le violon et est plus adaptable.
Je l'essais sur le site, mais je dois me revenir à ce soir. Merci Cadence!
Hey Cadence - J'essayais de résoudre votre violon, car vous avez initialement répondu à la question, mais les survolés apparaissent toujours en dehors du port de vue pour moi afin de ne pas résoudre le problème. : /
L'avez-vous testé en dehors du violon? Là ça marche mieux. Notez que j'ai remplacé le script initial.
Oui, je l'ai testé à l'extérieur de Fiddle avant de commenter et je ne pouvais pas revenir à des tests après votre mise à jour (par mon précédent commentaire ci-dessus), j'ai donc testé votre dernière version.
Pouvez-vous me dire dans quelle situation elle échoue? Je sais que ce n'est pas parfait spécialement dans de très petites fenêtres ou quand il a très peu de photos. Mais pour moi, cela a bien fonctionné et de manière très similaire au script iStock dans des scénarios de 960 et 600px.
mis à jour:
Regardez le code source
NB: Cela ne prend pas en considération des cas dans lesquels la fenêtre contextuelle est plus grande que la fenêtre, dans ce cas, vous devez non seulement changer la position de décalage, mais vous devez redimensionner la fenêtre contextuelle. fenêtre.
Merci Aseptik, mais je ne cherche pas à faire défiler la fenêtre pour afficher l'image de la navigation.
@Rpearce: TNX pour remarquer le lien brisé, je l'ai réparé.
Cela fonctionne. J'ai toutefois résolu le problème uniquement pour l'axe de Y. Pour le décalage horizontal, il devrait être le même. Voir comment cela fonctionne ici .
J'ai défini le Le balisage n'a pas changé, je viens d'ajouter la jQuery: < Pré> xxx espère que cela ait aidé !! top sur le côté de l'image * -1, cet alignement de l'image en bas si elle ne correspond pas, changez cette valeur à ce que vous voulez. Les images sont très grandes et ce script ne va cependant pas être des balles. Vous devriez obtenir toute la zone visible pour vous assurer qu'elle ne coupait pas de l'autre côté lorsque vous le posiez.
Essayez celui-ci ... semble relativement cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>
Bonjour Yazmin, j'ai mis à jour mon code pour refléter ce que vous avez demandé. Donnez-moi un essai et laissez-moi savoir. ;-)