Problème de codage pour Zoomer Gallery
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème de codage pour Zoomer Gallery
Bonjour,
Je viens demander de l'aide.
En effet, je tente d'installer Zoomer Gallery ( voir ici : http://www.webcssdesign.com/ajax/plugin-galerie-jquery-zoom-avec-effet-flash/ )
Mais malheureusement, je n'arrive toujours pas à faire fonctionner cela.
Voici la démonstration : http://www.addyosmani.com/resources/zoomer/zoomer.html
J'aimerais obtenir quelque chose de ressemblant, mais je rencontre quelque problème pour installer les codes.
Voici les codes :
HTML (à placer dans une page html, je suppose...)
CSS (à placer dans le Css...)
JAVASCRIPT ( à installer dans une page javascript, je suppose aussi...)
Même après avoir fait ces manoeuvres, rien ne se passe sur la page html...
Voici des liens qui peuvent aider :
(site officiel) : http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/
(téléchargement) : http://www.addyosmani.com/resources/zoomer/zoomer.for.jquery-1.0.zip
En espérant que quelqu'un puisse me venir en aide... car on va dire, que je suis perdu.
Je vous souhaite une bonne fin de journée.
Je viens demander de l'aide.
En effet, je tente d'installer Zoomer Gallery ( voir ici : http://www.webcssdesign.com/ajax/plugin-galerie-jquery-zoom-avec-effet-flash/ )
Mais malheureusement, je n'arrive toujours pas à faire fonctionner cela.
Voici la démonstration : http://www.addyosmani.com/resources/zoomer/zoomer.html
J'aimerais obtenir quelque chose de ressemblant, mais je rencontre quelque problème pour installer les codes.
Voici les codes :
HTML (à placer dans une page html, je suppose...)
<ul>
<li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
<li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
<li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>
</ul>
CSS (à placer dans le Css...)
ul.thumb li img {
width: 100px;
height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover
{
margin-top:15px;
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
JAVASCRIPT ( à installer dans une page javascript, je suppose aussi...)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,
speedTitle:400,debug:false});
});
</script>
Même après avoir fait ces manoeuvres, rien ne se passe sur la page html...
Voici des liens qui peuvent aider :
(site officiel) : http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/
(téléchargement) : http://www.addyosmani.com/resources/zoomer/zoomer.for.jquery-1.0.zip
En espérant que quelqu'un puisse me venir en aide... car on va dire, que je suis perdu.
Je vous souhaite une bonne fin de journée.
Dernière édition par julworld le Mar 25 Oct 2011 - 9:52, édité 1 fois
Re: Problème de codage pour Zoomer Gallery
Bonsoir,
Essaie de mettre le js dans la page-js juste ainsi (pas besoin du rappel-html à cet endroit) :
Où veux-tu mettre ta Zoomer Gallery ?
Ce n'est pas obligé de la mettre dans une page HTML, tu peux aussi la mettre dans le message d'accueil, dans les annonces, dans le template overall_header ou overall_footer...
Essaie de mettre le js dans la page-js juste ainsi (pas besoin du rappel-html à cet endroit) :
- Code:
$(document).ready(function(){
$(‘ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,
speedTitle:400,debug:false});
});
Où veux-tu mettre ta Zoomer Gallery ?
Ce n'est pas obligé de la mettre dans une page HTML, tu peux aussi la mettre dans le message d'accueil, dans les annonces, dans le template overall_header ou overall_footer...
Re: Problème de codage pour Zoomer Gallery
Bonsoir,
Merci pour votre aide.
J'ai remplacé le code javascript que j'avais mit, par celui que vous avez donné. Cependant, cela ne change rien.
J'aimerais que ce soit sur une page html.
Voici le code de ma page, actuellement :
Merci pour votre aide.
J'ai remplacé le code javascript que j'avais mit, par celui que vous avez donné. Cependant, cela ne change rien.
J'aimerais que ce soit sur une page html.
Voici le code de ma page, actuellement :
- Code:
<ul>
<li><a href="#"><img src="http://www.addyosmani.com/resources/zoomer/supe.jpg" alt="pg1" /></a></li>
<li><a href=""><img src="http://www.addyosmani.com/resources/zoomer/thumb6.jpg" alt="pg2"/></a></li>
<li><a href="#"><img src="http://www.addyosmani.com/resources/zoomer/garfield.jpg" alt="pg3" /></a></li>
</ul>
Re: Problème de codage pour Zoomer Gallery
Oui mais là ton code hatml n'a pas de balise (div ou autres) contenant les attributs "class" repris par le css...
Re: Problème de codage pour Zoomer Gallery
Ah... comment faut-il faire pour mettre ces fameuses balises ?
Re: Problème de codage pour Zoomer Gallery
Bonsoir,
Je up. J'ai besoin d'aide s'ilvouplaît.
edit 18h30 :
Je viens d'effectuer quelques manipulations, voici le nouveau code de ma page html:
Mais malgrès ce changement, rien ne se passe.
Je remarque qu'un seul changement: l'image est rétréci: http://www.prizee-forum.com/h1-galerie
(image en haut à gauche) (d'ailleurs, elle est mal placé, et je n'en vois qu'une seule... :/ )
Merci à ceux qui m'aideront !
Je up. J'ai besoin d'aide s'ilvouplaît.
edit 18h30 :
Je viens d'effectuer quelques manipulations, voici le nouveau code de ma page html:
- Code:
<ul class="thumb">
<li><a href="#"><img src="http://www.addyosmani.com/resources/zoomer/supe.jpg" alt="Title 1" /></a></li>
<li><a href="#"><img src="http://www.addyosmani.com/resources/zoomer/thumb6.jpg" alt="Title 2"/></a></li>
<li><a href="#"><img src="http://www.addyosmani.com/resources/zoomer/garfield.jpg" alt="Title 3" /></a></li>
</ul>
Mais malgrès ce changement, rien ne se passe.
Je remarque qu'un seul changement: l'image est rétréci: http://www.prizee-forum.com/h1-galerie
(image en haut à gauche) (d'ailleurs, elle est mal placé, et je n'en vois qu'une seule... :/ )
Merci à ceux qui m'aideront !
Re: Problème de codage pour Zoomer Gallery
Bonsoir,
Je up.
Je up.
Re: Problème de codage pour Zoomer Gallery
Bonjour,
Toujours besoin d'aide s'ilvouplaît.
Toujours besoin d'aide s'ilvouplaît.
Re: Problème de codage pour Zoomer Gallery
Bonsoir,
Bonne soirée !
- Code:
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<title>Zoomer for jQuery</title>
<!--[if IE 6]>
<style type="text/css" media="screen">
ul.thumb li img.hover {
margin-top:15px;
background:url(thumb_bg.gif) no-repeat center center;
border: none;
}
ul.thumb li .title{color:#fff;width:185px;height:50px;margin:0;font-weight:900;background:url(title.gif) no-repeat center center;padding:17px 0 0 0;text-align:center;}
</style>
<![endif]-->
<style type="text/css">
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
#page{
margin:0 auto;
position:relative;
width:850px;
font-family:verdana;
font-size:12px;
}
#content{
width:100%;
}
pre{
border:3px solid #ccc;
padding:5px;
font-size:12px;
font-family:arial;
}
.bold{font-weight:bold;}
.blue{color:blue;}
.red{color:red;}
#footer{
margin-top:5px;
text-align:center;
width:100%;
height:auto;
padding:5px;
background-color:#ccc;
}
#logo,#foot { margin-left: 10px; }
</style>
</head>
<body>
<div id="page">
<center>
</center>
<br><br><br>
<div id="content">
<div class="container">
<img id="logo" src="logo.jpg"></img>
<ul class="thumb">
<li><a href="#"><img src="robots.jpg" alt="Robots like cameras" /></a></li>
<li><a href="#"><img src="monster.jpg" alt="Monsters!" /></a></li>
<li><a href="#"><img src="santa.jpg" alt="Santa down under" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="Sponguebob!" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="Star Wars" /></a></li>
<li><a href="#"><img src="hulk.jpg" alt="Hulk Smash!" /></a></li>
<li><a href="#"><img src="dino.png" alt="Dinosaur time" /></a></li>
<li><a href="#"><img src="orange.jpg" alt="Orange car" /></a></li>
<li><a href="#"><img src="alien.jpg" alt="Aliens!" /></a></li>
<li><a href="#"><img src="supe.jpg" alt="It's Superman!" /></a></li>
<li><a href="#"><img src="garfield.jpg" alt="Where's my lasagne?" /></a></li>
<li><a href="#"><img src="bridge.jpg" alt="The bridge at Sunset" /></a></li>
<li><a href="#"><img src="peanuts.jpg" alt="Peanuts!" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="1956 Yellow Car" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="Ooooh. Pretty" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="Lets build something" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="Puppy love" /></a></li>
<li><a href="#"><img src="thumb1.jpg" alt="It's a Toy Story" /></a></li>
</ul>
<img id="foot" src="footer.jpg"></img>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){$.fn.Zoomer=function(b){var c=$.extend({speedView:200,speedRemove:400,altAnim:false,speedTitle:400,debug:false},b);var d=$.extend(c,b);function e(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s)}else{alert(s)}}if(d.speedView==undefined||d.speedRemove==undefined||d.altAnim==undefined||d.speedTitle==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}if(d.debug==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}if(typeof d.speedView!="undefined"||typeof d.speedRemove!="undefined"||typeof d.altAnim!="undefined"||typeof d.speedTitle!="undefined"){if(d.debug==true){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle)}$(this).hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-110px',marginLeft:'-110px',top:'50%',left:'50%',width:'175px',height:'181px',padding:'20px'},d.speedView);if(d.altAnim==true){var a=$(this).find("img").attr("alt");if(a.length!=0){$(this).prepend('<span class="title">'+a+'</span>');$('.title').animate({marginLeft:'-42px',marginTop:'90px'},d.speedTitle).css({'z-index':'10','position':'absolute','float':'left'})}}},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'100px',height:'100px',padding:'5px'},d.speedRemove);$(this).find('.title').remove()})}}})(jQuery);</script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>
<a style="display:none" href="http://www.addyosmani.com">AddyOsmani.com</a>
</body>
</html>
Bonne soirée !
- Fichiers joints
kiwi14637- Membre habitué
-
Messages : 1387
Inscrit(e) le : 19/05/2010
Re: Problème de codage pour Zoomer Gallery
Bonjour,
Merci infiniment pour votre aide !
Problème résolu. Bonne journée.
Merci infiniment pour votre aide !
Problème résolu. Bonne journée.
Sujets similaires
» Problème de codage pour menu personnalisé.
» Codage pour mon qeel
» Aide pour codage
» Besoin d'aide pour codage
» Modifier codage pour "CODE"
» Codage pour mon qeel
» Aide pour codage
» Besoin d'aide pour codage
» Modifier codage pour "CODE"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum