zoombox et slidshow

Par juni05, il y a 13 ans

Javascript

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

juni05, il y a 13 ans

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

});
});

juni05, il y a 13 ans

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>

juni05, il y a 13 ans

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'
});

});

juni05, il y a 13 ans

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.

juni05, il y a 13 ans

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