18041 sujets

Questions générales et questions de débutants

Jquery, gallerie photo et image cliquable vers d autres pages du site

Bonjour,

Tout d'abord merci pour votre travail mis en ligne.

Je travaille sur votre tutoriel "Une galerie d'images simple avec Jquery", et l'amélioration que vous avez ajouté.
J'essaye de me servir de ces deux tutoriaux pour créer une fonction qui, lorsqu'on clique sur la grande image nous dirige vers une page web .
Ces liens hypertextes seraient renseignés dans les balises <li> et différents pour chaque image.

Mes tentatives sont pour le moment infructueuses et si vous avez le temps, pourriez vous m'indiquer des pistes ou les changements a effectuer ?

Merci d'avance,

Bien cordialement,

Julie
Bonjour Julie,


Est-ce qu'on peut avoir une page d'exemple de ce que tu as déjà fait, histoire d'avoir une idée d'où tu en est ?
OK,

merci pour le conseil...je surmonte mon apréhension Smiley smile

Le probleme c'est que toutes les grandes images cliquées pointent vers le meme lien...

Voici la page :

http://www.fightingwords.ie/index-new2.php



<script type="text/javascript">

jQuery(function($){ 
 
  var settings = { 
    thumbListId: "thumbs", 
    imgViewerId: "viewer", 
    activeClass: "active", 
    activeTitle: "Photo en cours de visualisation", 
    loaderTitle: "Chargement en cours", 
    loaderImage: "images/loader.gif" 
  }; 
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"), 
    firstThumbLink = thumbLinks.eq(0), 
    highlight = function(elt){ 
    	
      thumbLinks.removeClass(settings.activeClass).removeAttr("title"); 
      	elt.addClass(settings.activeClass).attr("title",settings.activeTitle); 
    }, 
    loader = $(document.createElement("img")).attr({ 
      alt: settings.loaderTitle, 
      title: settings.loaderTitle, 
      src: settings.loaderImage 
    }); 
    
    var thumbLinks = $("#"+settings.thumbListId).find("a"), 
    firstThumbLink = thumbLinks.eq(0); 
  highlight = function(elt){ 
        thumbLinks.removeClass(settings.activeClass).removeAttr("title"); 
        elt.addClass(settings.activeClass).attr("title",settings.activeTitle); 
      }; 
  
  
$("#"+settings.thumbListId).after( 
    $(document.createElement("p")) 
      .attr("id",settings.imgViewerId) 
      .append( 
        $(document.createElement("a")) 
          .attr("href",firstThumbLink.attr("id") ) 
          .append( 
            $(document.createElement("img")).attr({ 
              alt: "", 
              src: firstThumbLink.attr("href") 
            }) 
          ) 
      ) 
  ); 
  
 
  var imgViewerLink = $("#"+settings.imgViewerId).children(), 
      bigPic = imgViewerLink.children(); 
      showLoader = function(){ 
        imgViewerLink.html(loader); 
      }, 
      loadNewImg = function(){ 
        imgViewerLink.html($(this).fadeIn(250)); 
      }, 
      selectActiveThumb = function(){ 
        return thumbLinks.filter("." + settings.activeClass); 
      }; 
 
  thumbLinks.click(function(e){ 
				    e.preventDefault(); 
				    var $this = $(this), 
				        target = $this.attr("href"); 
				    if (bigPic.attr("src") == target) return; 
				    highlight($this); 
				    showLoader(); 
				    bigPic 
				      .load(loadNewImg) 
				      .attr("src",target); 
      });
      
     
      var bigPicLien = imgViewer.children("a");
       
  	imgViewerLink.click(function(e){ 
					 e.preventDefault();  
				     var $this = $(this), 
				     target = $this.attr("id"); 
				     if (bigPicLien.attr("href") == target) return; 
						selectActiveThumb().parent().next().children();
				     bigPicLien 
				      .attr("href",target); 
  					}); 
 

 
}); 
</script>


<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>


<div id="frame">



	<!-- Container for the whole header-->
<div id="contentheader">
    
    <div id="header">
    <img src="images/logo.jpg" alt="Fighting Words" width="307" height="92" hspace="0" vspace="0" border="0" />
	</div>   
      
        <!-- Extra links in the header-->      
        
        <!-- END Extra links in the header-->
		<div id="tab_container">
        <div id="navcontainer-new">
				&nbsp;&nbsp;
				<a href="http://www.fightingwords.ie/index.php"> <img src="images/newDesign/T-home.jpg" width="9%"/> </a>
				&nbsp;
				 <a href="http://www.fightingwords.ie/news/index.php"><img src="images/newDesign/T-news.jpg" width="8%"/></a>

				<a href="http://www.fightingwords.ie/whats_the_story/index.php"><img src="images/newDesign/T-work.jpg" width="15%"/></a>
				
				
				<a href="http://www.fightingwords.ie/volunteers/index.php"><img src="images/newDesign/T-volunteers.jpg" width="15%"/></a>
				&nbsp;&nbsp;
				 <a href="http://www.fightingwords.ie/EventsList/index.php"><img src="images/newDesign/T-event-celendar.jpg" width="15%"/></a>
								 
				<a href="http://www.fightingwords.ie/news/list-stories-web.php"><img src="images/newDesign/T-stories.jpg" width="11%"/></a>
				  &nbsp;&nbsp;

				 <a href="http://www.fightingwords.ie/summerCamps/summer-camp.php"><img src="images/newDesign/T-summercamp.jpg" width="15%"9/></a>             
       </div>
       </div>
</div>
<!-- END Container for the whole header-->   

      
<div id="frame33">
		<div id="textFrontPage2">
		<br/>
		<a href="http://www.fightingwords.ie/quotes/index.php">
		<img src="images/zarastQuote.jpg"  />
		</a>
		</div>


		<div id ="photo-quote">
					<a href="http://www.fightingwords.ie/summerCamps/summer-camp.php">
					<img src="images/triplette.jpg" />
					</a>
		</div>

</div>
    
    

					<ul id="thumbs">

					<br/><br/><br/>
					
					<li>
					<a href="images/newDesign/poster-news.jpg" id="http://www.fightingwords.ie/news/index.php">
										
					<img src="images/newDesign/news-rouge.jpg" alt="pics news fighting words centre"/>	
					</a>
					</li> 
					<br/><br/><br/>
					
					<li>
					<a href="images/newDesign/poster-the-work.jpg" id="http://www.fightingwords.ie/whats_the_story/index.php" >
					<img src="images/newDesign/theWork-rouge.jpg"/>	
					</a>
					</li>
					<br/><br/><br/>
					
					<li>
					<a href="images/newDesign/rossa-head.jpg"  id="http://www.fightingwords.ie/volunteers/index.php"  >
					
					<img src="images/newDesign/volunteers-rouge.jpg"/>	
					</a></li>
					<br/><br/><br/>
					
					<li>	
					<a href="images/newDesign/poster-story.jpg"  id="http://www.fightingwords.ie/news/list-stories-web.php" >
					<img src="images/newDesign/stories-rouge.jpg"/>	
					</a></li>
					<br/><br/><br/>
					
					<li>
					<a href="images/newDesign/poster-video.jpg"  id="http://www.fightingwords.ie/news/video.php">
					<img src="images/newDesign/video-rouge.jpg"/>	
					</a>
					</li>
					<br/><br/>	<br/>				
					 </ul> 
					
					
			


<div >    
   
</div>

Modifié par Thomas D. (16 Sep 2009 - 16:38)
Bonjour,

Tout d'abord, merci pour votre site qui m'aide énormément dans le développement de mes pages web.

Je viens de tomber sur ton post et j'ai le même problème. J'ai intégrer la galerie à mon site et je souhaiterai pouvoir ouvrir une nouvelle page web avec l'image en taille originale quand on clique sur l'image du viewer. J'ai essayé plusieurs codes mais je pense que mes connaissances en javascripts sont trop limité et je m'y perd.
As-tu trouver une solution?

Merci.
Bonjour,

Au final j'ai abandonné jquery... et j'ai utilisé du javascript.
J'ai réussi a faire ce que je voulais cf : http://www.fightingwords.ie
Regarde le bas de la page avec les images qui changent au survol et redirigent sur une autre page...
Tu veux que je t'envoie le code de la page d'accueil ?

julie
J'ai aussi l'impression que je vais devoir repartir de zéro. Je vais encore tester deux trois trucs et si ça marche, je vais vraiment tout recommencer.

En tout cas je veux bien voir le code de la page.
Merci pour le conseil
En espérant que cela puisse t'aider...
j.


<!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"/>
<title>Fighting Words</title>
<link rel="stylesheet" type="text/css" href="css/web.css"/>
<link rel="stylesheet" type="text/css" href="css/text2.css"/>


<script type="text/javascript">
<!--
function mouseover(imageSent)
{
document.getElementById("viewerIn").style.backgroundImage= 'url(' + imageSent + ')';

}
function mouseout(imageOut)
{
document.getElementById("viewerIn").style.backgroundImage= 'url(' + imageOut + ')';
}
//-->
</script>

</head>

<body>
<div id="frame">



<!-- Container for the whole header-->
<div id="contentheader">

<div id="header">
<img src="images/logo.jpg" alt="Fighting Words" width="307" height="92" hspace="0" vspace="0" border="0" />
</div>

<!-- Extra links in the header-->

<!-- END Extra links in the header-->
<div id="tab_container">
<div id="navcontainer">

<?php include("includes/menu-new-design.php") ?>
</div>
</div>
</div>
<!-- END Container for the whole header-->


<div id="frame33">
<div id="textFrontPage2">
<br/>
<a href="http://www.fightingwords.ie/whats_the_story/index.php">
<img src="images/reason-cheerful.jpg" alt="news" class="imgCheerf"/>
</a>
</div>


<div id ="photo-quote">

<a href="http://www.fightingwords.ie/news/list-stories-web.php">
<img src="images/teddy-in-fire.jpg" class="textFrontPage2Img" alt="poster img from story Nose Job Gone Wrong" width="110%"/>
</a>

</div>

</div>



<ul id="thumbs">

<li>
<a href="http://www.fightingwords.ie/news/index.php" onmouseover="mouseover('images/newDesign/poster-news.gif')" onmouseout="mouseout('images/newDesign/poster-news.gif')">
<img src="images/newDesign/news-rouge.jpg" alt="mini img for text the news"/>
</a>

</li>


<li>
<a href="http://www.fightingwords.ie/whats_the_story/index.php" onmouseover="mouseover('images/newDesign/poster-the-work.jpg')" onmouseout="mouseout('images/newDesign/poster-news.gif')">
<img src="images/newDesign/theWork-rouge.jpg" alt="mini img for text the work"/>
</a>
</li>


<li>
<a href="http://www.fightingwords.ie/volunteers/index.php" onmouseover="mouseover('images/newDesign/rossa-head.jpg')" onmouseout="mouseout('images/newDesign/poster-news.gif')">

<img src="images/newDesign/volunteers-rouge.jpg" alt="mini img for text volunteer"/>
</a></li>


<li>
<a href="http://www.fightingwords.ie/news/list-stories-web.php" onmouseover="mouseover('images/newDesign/poster-story.jpg')" onmouseout="mouseout('images/newDesign/poster-news.gif')">
<img src="images/newDesign/stories-rouge.jpg" alt="mini img for text the stories"/>
</a></li>


<li>
<a href="http://www.fightingwords.ie/news/video.php" onmouseover="mouseover('images/newDesign/poster-video.jpg')" onmouseout="mouseout('images/newDesign/poster-news.gif')">
<img src="images/newDesign/video-rouge.jpg" alt="mini img for text the video"/>
</a>
</li>

</ul>

<div id="viewer">
<p id="viewerIn">

</p>

</div>



<div >

</div>



<br clear="all"/> </div>
</div> <div id="footer">
<div id="footer_layer1">
<div id="footer_inner_right">
<?php include("includes/footer_topnav.php") ?>
</div>
</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6026997-1");
pageTracker._trackPageview();
</script>

</body>
</html>
Sujet clos
Aller à