|
La Communauté Webmaster 
| Pages: [1] |
 |
|
|
|
 Auteur |
Sujet: [RESOLU] Slideshow (Lu 1889 fois) |
|
 |
[RESOLU] Slideshow
« sur: le 06-09-2011 a 13:40:33 » |
|
Cro_mag
Membre récent
 Hors-Ligne
Sexe: 
Messages: 12
 
|
Bonjour,
Alors je crée un site perso, et j'aimerais réalisé un effet slideshow sur l'accueil, comme sur ce site :
http://www.fredbelaubre.com/
J'ai repéré un slideshow interessant, le s3Slider (http://www.serie3.info/s3slider/) seulement il ne veut pas s'installer, je me permets de vous laisser mon code pour m'aider à trouver où ça cloche :
index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="page">
<!--Debut des cadres-->
<div id="header">
</div>
<div id="global">
<div id="menu">
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Accueil</a></li>
<li class="sliding-element"><a href="#">Portrait</a></li>
<li class="sliding-element"><a href="#">Palmarès</a></li>
<li class="sliding-element"><a href="#">Galerie</a></li>
<li class="sliding-element"><a href="#">Contact</a></li>
<li class="sliding-element"><a href="#">Sponsors</a></li>
</ul>
</div>
</div>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="images/1.jpg" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="images/2.jpg" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
<div id="sponsors">
</div>
<div id="barrebas">
<hr align="center" width="90%" color="black" size="1">
</div>
<div id="mention">
<span class="mention">
<br />
Design and Conception by Cro_mag <br />
2011 All right Reserved</span>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
#page {
background-color: #FFF;
width: 80%;
color: #FFF;
margin-right: auto;
margin-left: auto;
}
#header {
width: 100%;
}
#global {
width: 100%;
background-color: #FFF;
}
#menu {
width: 15%;
float: left;
}
#slideshow {
float: right;
width: 85%;
}
.mention {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: lighter;
color: #333;
font-size: 9px;
text-align: center;
}
#sponsors {
clear: both;
width: 100%;
}
#barrebas {
}
#mention {
}
ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 20px 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 60px;
padding: 5px 15px;
margin: 0;
margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background: #333;
border: 1px solid #1a1a1a;
font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
color: #999;
background: #222;
border: 1px solid #1a1a1a;
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
s3slider.js
Code : JavaScript - Sélectionner
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element .id + "Content ." + element.id + "Image");
var itemsSpan = $("#" + element.id + "Content ." + element.id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
et j'ai encore un sliding_effect.js pour mon menu, et jquery bien sur
Mes questions sont les suivantes :
1) pourquoi mon script ne marche pas ?
2) Comment faire pour avoir la même chose mais pas juste rectangulaire, que ca puisse aller jusque sous le menu comme sur le site que je vous ai montré ?
3) et l'effet découpé ? (sinon je ais cet effet sous photoshop et c'est reglé)
PS : je sais que c'est un module flash l'exemple
Je vous remercie par avance du temps et de l'aide que vous pourrez m'apporter !
Cro_mag |
|
|
|
|
|
|
|
Re:Slideshow
« Répondre #1 sur: le 07-09-2011 a 10:47:16 » |
|
|
|
|
|
Re:Slideshow
« Répondre #2 sur: le 07-09-2011 a 13:07:09 » |
|
|
|
|
|
Re:Slideshow
« Répondre #3 sur: le 07-09-2011 a 15:30:53 » |
|
|
|
|
|
Re:Slideshow
« Répondre #4 sur: le 07-09-2011 a 17:05:00 » |
|
|
|
|
|
Re:Slideshow
« Répondre #5 sur: le 07-09-2011 a 17:45:39 » |
|
Cro_mag
Membre récent
Hors-Ligne
Sexe:
Messages: 12
|
Bonjour Pad,
Malheureusement le site n'est pas en ligne, mais je vais vous mettre les codes sur la page :
j'utilise donc un menu (sliding_effect) avec jquery, puis un slideshow (floom) avec mootools more et core
Index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="floom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="mootools-1.2.2-core.js"></script>
<script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" charset="utf-8" src="floom.js"></script>
<link rel="stylesheet" href="floom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(e) {
// option 1
var slides = [
{
image: 'nature-photo0.jpg',
caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
},
{
image: 'nature-photo1.jpg',
caption: 'Excepteur sint occaecat cupidatat non proident'
},
{
image: 'nature-photo2.jpg',
caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
},
{
image: 'nature-photo3.jpg',
caption: 'Deserunt mollit anim id est laborum'
},
{
image: 'nature-photo4.jpg',
caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
}
];
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="page">
<!--Debut des cadres-->
<div id="sponsors">
<table width="85%" border="0" align="center" cellspacing="0" cellpadding="10">
<tr>
<td width="50" align="right"><img src="images/logo_orcieres.jpg" width="40" height="40" alt="orcières" /></td>
<td width="50" align="left"><img src="images/wcup.jpg" width="40" height="40" alt="wcup" /></td>
</tr>
</table>
</div>
<div id="header">
<span class="fort">Fort </span>
<span class="julien">Julien</span>
</div>
<div id="barrehaut"><hr align="center" width="90%" color="black" size="1">
</div>
<div id="global">
</div>
<div id="menu">
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Accueil</a></li>
<li class="sliding-element"><a href="#">Portrait</a></li>
<li class="sliding-element"><a href="#">Palmarès</a></li>
<li class="sliding-element"><a href="#">Galerie</a></li>
<li class="sliding-element"><a href="#">Contact</a></li>
<li class="sliding-element"><a href="#">Sponsors</a></li>
</ul>
</div>
<div id="slideshow">
<div id="blinds-cont">
<div id="blinds">
</div>
</div>
<div id="barrebas">
<hr align="center" width="90%" color="black" size="1">
</div>
<div id="mention">
<span class="mention"><table width="85%" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="50" align="left">Design and Conception by Cro_mag</td>
<td width="50" align="right">2011 All right Reserved</td>
</tr>
</table>
</span></div>
</div>
</div>
</body>
</html>
|
|
Mes images du slideshow n'apparaissent même pas !!
Oui les images sont bien à la racine du site.
Si vous avez besoin de voir d'autres fichiers dîtes moi.
J'ai lu en fait que mootools et jquery rentrait en conflit mais pour résoudre ce problème c'est assez confus.
Merci par avance de votre aide
Cro_mag |
|
|
|
|
|
Re:Slideshow
« Répondre #6 sur: le 07-09-2011 a 21:08:20 » |
|
|
|
|
|
Re:Slideshow
« Répondre #7 sur: le 14-09-2011 a 14:43:41 » |
|
|
|
|
| Pages:
[1] |
 |
|
|
| |
|
|
