Problème de codage pour Zoomer Gallery

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de codage pour Zoomer Gallery

Message par julworld Dim 16 Oct 2011 - 17:41

Bonjour,

Je viens demander de l'aide. Smile
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. Confused
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. Confused

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. silent Razz

Je vous souhaite une bonne fin de journée. Wink


Dernière édition par julworld le Mar 25 Oct 2011 - 9:52, édité 1 fois
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par kheino Dim 16 Oct 2011 - 18:39

Bonsoir,

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...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Dim 16 Oct 2011 - 19:21

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 :
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>

julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par kheino Lun 17 Oct 2011 - 11:16

Oui mais là ton code hatml n'a pas de balise (div ou autres) contenant les attributs "class" repris par le css...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Lun 17 Oct 2011 - 20:25

Ah... comment faut-il faire pour mettre ces fameuses balises ?
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Mer 19 Oct 2011 - 17:48

Bonsoir,

Je up. J'ai besoin d'aide s'ilvouplaît. Confused Wink

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 ! Embarassed
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Jeu 20 Oct 2011 - 18:22

Bonsoir,

Je up. Confused
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Sam 22 Oct 2011 - 15:18

Bonjour,

Toujours besoin d'aide s'ilvouplaît. Smile
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par kiwi14637 Lun 24 Oct 2011 - 19:10

Bonsoir,
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
Problème de codage pour Zoomer Gallery Attachment
zoomer.for.jquery-1.0.zip Vous n'avez pas la permission de télécharger les fichiers joints.(321 Ko) Téléchargé 2 fois
kiwi14637

kiwi14637
Membre habitué

Masculin
Messages : 1387
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage pour Zoomer Gallery

Message par julworld Mar 25 Oct 2011 - 9:51

Bonjour,

Merci infiniment pour votre aide ! Very Happy

Problème résolu. Bonne journée. Wink
julworld

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum