Bonjour à vous !
J'espère que vous allez pouvoir m'aider
!
Alors j'ai intégré le jQuery jCarousel Lite + jQuery Captify
que l'on peut voir ici : LIEN
J'avais surtout besoin de la petite légende qui monte en slide
j'ai enlevé les flèches je n'avais pas besoin de plusieurs images qui slide de droite à gauche
mais j'aurai voulu mettre un effet lightbox lorsque l'on clique sur mes images !
Le problème c'est que avec lightbox le jQuery Captify ne fonctionne plus
!
comment pourrais-je mettre en place ma lightbox sans géner l'autre script ?
merci beaucoup d'avance
Modifié par mi2k (06 Sep 2011 - 17:35)
J'espère que vous allez pouvoir m'aider
!Alors j'ai intégré le jQuery jCarousel Lite + jQuery Captify
que l'on peut voir ici : LIEN
J'avais surtout besoin de la petite légende qui monte en slide
j'ai enlevé les flèches je n'avais pas besoin de plusieurs images qui slide de droite à gauche
mais j'aurai voulu mettre un effet lightbox lorsque l'on clique sur mes images !
Le problème c'est que avec lightbox le jQuery Captify ne fonctionne plus
!comment pourrais-je mettre en place ma lightbox sans géner l'autre script ?
a écrit :
<!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="fr" >
<head profile="http://gmpg.org/xfn/11">
<title>BLABLABLA</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<!-- script Jcarousel -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>
<script type="text/javascript">
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(document).ready(function(){
$('img.captify').captify({
// all of these options are... optional
// ---
// speed of the mouseover effect
speedOver: 'fast',
// speed of the mouseout effect
speedOut: 'normal',
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'slide',
// text/html to be placed at the beginning of every caption
prefix: '',
// opacity of the caption on mouse over
opacity: '0.5',
// the name of the CSS class to apply to the caption box
className: 'caption-bottom',
// position of the caption (top or bottom)
position: 'bottom',
// caption span % of the image
spanWidth: '100%'
});
});
</script>
<!-- script lightbox -->
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/image-1.jpg" rel="lightbox"><img src="images/1.png" alt="blabla" class="captify" /></a>
</body>
merci beaucoup d'avance
Modifié par mi2k (06 Sep 2011 - 17:35)