zoombox et slidshow
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 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
5 réponses
voici le premier!
<!-- CSS -->
<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
<!-- JS -->
<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>
<!-- Init Plugin -->
<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
<!-- 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" />
<!-- JS -->
<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>
<!-- Init Plugin -->
<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'
});
});
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'>
<!-- 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" />
<!-- JS -->
<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>
<!-- Init Plugin -->
<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>
<body>
<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.