Slidshow + zoombox

Résolu

juni05 Messages postés 3 Date d'inscription jeudi 21 juin 2012 Statut Membre Dernière intervention 21 juin 2012 - 21 juin 2012 à 11:30
juni05 Messages postés 3 Date d'inscription jeudi 21 juin 2012 Statut Membre Dernière intervention 21 juin 2012 - 21 juin 2012 à 12:39

Bonjour,

je suis débutant dans la création de site.

J'ai mis ce slideshow sur mon site http://thiagosf.net/projects/jquery/skitter/ que j'ai un peu modifié.
J'aimerai rajouter zoombox (lightbox) sur la même page. Mais je ne sais pas comment faire. Est ce possible?

Je n'y arrive pas. Que dois je mettre dans le html?

Merci de votre aide

juni

voici le premier!


<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

<script>
$(document).ready(function() {
$(".box_skitter_large").skitter({
numbers: false,
numbers_align: "right",
dots: false,
preview: false,
focus: false,
focus_position: "rightTop",
thumbs: false,
controls: true,
controls_position: "rightTop",
progressbar: false,
progressbar_css: {
top:'5px',
left:'590px',
height:10,
borderRadius:'2px',
width:200,
backgroundColor:'#000',
opacity:.7
},
animateNumberOver: { 'backgroundColor':'#555' },
enable_navigation_keys: false
});
});

et le second

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>
<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
jQuery(function($){
$('a.zoombox').zoombox({
autoplay : true,
theme : 'prettyphoto'
});
});
</script>

voici le code que j'ai mis. Cependant, zoombox ne fonctionne pas. Exemple sur un lien youtube. La lightbox ne fonctionne pas. J'atterrie directement sur youtube.

Pouvez vous m'aider?
merci



<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />


<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>


<script>

$(document).ready(function() {
$(".box_skitter_large").skitter({

numbers: false,
numbers_align: "right",
dots: false,
preview: false,

focus: false,
focus_position: "rightTop",
thumbs: false,
controls: true,
controls_position: "rightTop",

progressbar: false,
progressbar_css: {
top:'5px',
left:'590px',
height:10,
borderRadius:'2px',
width:200,
backgroundColor:'#000',
opacity:.7
},

animateNumberOver: { 'backgroundColor':'#555' },
enable_navigation_keys: false
});
});

jQuery(function($){
$('a.zoombox').zoombox({
autoplay : true,
theme : 'prettyphoto'
});

});

2 réponses

Réponse 1 / 2

juni05 Messages postés 3 Date d'inscription jeudi 21 juin 2012 Statut Membre Dernière intervention 21 juin 2012
21 juin 2012 à 12:39

c'est bon j'ai trouvé, je ne maitrise pas, mais à force de bidouiller....

Réponse 2 / 2

juni05 Messages postés 3 Date d'inscription jeudi 21 juin 2012 Statut Membre Dernière intervention 21 juin 2012
21 juin 2012 à 11:50

ca marche comme ca:

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>


<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>


<script>
$(document).ready(function() {
$(".box_skitter_large").skitter({

numbers: false,
numbers_align: "right",
dots: false,
preview: false,

focus: false,
focus_position: "rightTop",
thumbs: false,
controls: true,
controls_position: "rightTop",

progressbar: false,
progressbar_css: {
top:'5px',
left:'590px',
height:10,
borderRadius:'2px',
width:200,
backgroundColor:'#000',
opacity:.7
},

animateNumberOver: { 'backgroundColor':'#555' },
enable_navigation_keys: false
});
});

</script>

</head>

<script>
jQuery(function($){
$('a.zoombox').zoombox({
autoplay : true,
theme : 'prettyphoto'
});
});
</script>

Mais j'ai un autre probleme! j'ai une bande transparent du sildshow passe sur la lightbox.

Votre réponse