11540 sujets

JavaScript, DOM et API Web HTML5

Implémentation de deux scripts Jquery impossible

Bonjour à tous !

Je tiens avant tout à préciser que je suis débutant en html/css et que je ne connais pas grand chose à jQuery Smiley smile

J'aurais une petite question, j'espère que quelqu'un pourra m'aider Smiley biggrin
Je souhaite intégrer sur mon site 2 scripts jQuery qui sont les suivants:

http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery

FancyBox
http://fancybox.net/howto

Mon problème est le suivant:

Pour faire fonctionner Fancybox, il est nécessaire d'intégrer une class dans un lien image de cette facon: 

<a href="#" class="fancybox"><img src="#" /></a>


mais il m'est impossible de procéder de la sorte à partir du moment où j'utilise l'autre script qui nécessite un code de ce genre: 

<div class="item">
    <a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>
    <div class="caption">
        <a href="">Title</a>
        <p>Description</p>
    </div>
</div>


L'image étant "recouverte" par l'effet de ce script, elle n'est plus cliquable, et j'aimerais rendre le texte cliquable pour qu'il puisse dévoiler l'image avec l'effet Fancybox...

J'espère avoir été assez clair dans mon soucis Smiley smile

Merci beaucoup à l'avance !
Modifié par chawyb (17 Feb 2011 - 03:38)
salut

je n'est pas testé mais


<div class="item">
<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>     
<div class="caption fancybox">
<a href="">Title</a>
<p>Description></p>
</div> 
</div>


ou aussi


<div class="item">
<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>     
<div class="caption">
<a href="" class="fancybox">Title</a>
<p>Description></p>
</div> 
</div>
Salut et merci de ta réponse Smiley smile

Malheureusement j'avais déjà testé et ça ne fonctionne pas...

Peut-être existe-t-il un script qui nécessite seulement une classe dans la balise <a> qui produit un effet lightbox lorsque le href correspond à une image ?
salut

voilà un basique pour la façon de mélanger ces deux scripts, à toi de modifier les styles. çà fonctionne, j'ai testé.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>FancyBox 1.3.4 | Demonstration</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.fancybox-1.3.4.js"></script>
	<link rel="stylesheet" type="text/css" href="./jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<style>
	.item {
	width:125px;
	height:125px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	}

	.item .caption {
	width:125px;
	height:125px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

	}

	.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
	}

	.item .caption p {
	padding:5px;	
	margin:0;
	font-size:10px;
	}

	img {
	border: none;
	
	/* allow javascript moves the img position*/
	position:absolute;
	}
</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".example1").fancybox();
		});
		$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img .example1').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img .example1').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});
</script>
	</head>
<body>
	<div class="item">
	<img src="./images/1_s.jpg" alt="Cycliner" title="" width="75" height="75"/>
	<div class="caption">
		<a class="example1" href="./images/1_b.jpg">Voir en grand</a>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
</div>
</body>
</html>
Super merci beaucoup de ta disponibilité je teste ce soir et je te dis quoi Smiley biggrin

[EDIT]

Un très grand merci l'ami, ça fonctionne parfaitement Smiley cligne
Modifié par chawyb (17 Feb 2011 - 03:38)
Sujet clos
Aller à