Bonjour,
Je me présente : Loïc, je suis un grand débutant en JAVA et je travaille parfois pour le site internet de ma société.
Actuellement, j'ai 2 codes qui fonctionnent parfaitement séparément.
Un premier me permet d'afficher une image en fonction du clic ou non sur une "bannière" :
Un second (très long) me permet de créer un "défilé" d'images :
Mon problème :
Je souhaite intégrer le second code (ou en tout cas le même principe) dans le premier.
Lorsque je clique sur la "bannière", le "défilé" s'affiche.
Merci d'avance à tous ceux qui pourront m'aider,
Bonne journée,
Loïc
Modifié par remibob (18 May 2015 - 12:28)
Je me présente : Loïc, je suis un grand débutant en JAVA et je travaille parfois pour le site internet de ma société.
Actuellement, j'ai 2 codes qui fonctionnent parfaitement séparément.
Un premier me permet d'afficher une image en fonction du clic ou non sur une "bannière" :
<script type="text/javascript">
var afficher=false; //permet de savoir si l'image est affichée ou non
function viewImage(id) {
var contenuImage=!afficher ? "<img src='/image/banniere.jpg'>" : ""; //en fonction de afficher on met l'image ou non
afficher=!afficher;
var contenuBouton=afficher ? "<img src='/image/exemple2.jpg'>" : "<img src='/image/exemle2.jpg'>" ; //On met un texte correspondant
document.getElementById(id).innerHTML=contenuImage;
document.getElementById("bouton").innerHTML=contenuBouton;
}
</script>
<div id="bouton" onclick="javascript:viewImage('image');"> <img src='/image/exemple2.jpg'>
</div>
<div id="image"></div>
Un second (très long) me permet de créer un "défilé" d'images :
<style type="text/css">
#localStoreRight {
margin-left: 0;
width: 684px;
padding-left: 10px;
}
.leftNavigation {
width: 205px;
}
#storeInfoContainer {
margin-bottom:0px;
padding-left:0px;
margin-top: 0px;
border: 0px none #ffffff;
}
.caja {
width:678px;
margin-bottom:0px;
padding-left:0px;
padding-bottom: 0px;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
</style><style type="text/css">
<!--
.nivoSlider {
width:678px;
height:185px;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:40%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
-->
</style>
<style type="text/css">
<!--
.nivoSlider {
position:relative;
background:#fff url(/ms/it_IT/img/local_store_info/parma/parma_angolo_occasioni/slider/loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:49%;
bottom:-20px;
margin-left:0px; /* Tweak this to center bullets */
}
.nivo-controlNav a {
display:block;
width:15px;
height:15px;
background:url(/ms/it_IT/img/local_store_info/parma/parma_angolo_occasioni/slider/bullets2.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -15px;
}
.nivo-directionNav a {
display:block;
width:40px;
height:53px;
background:url(/ms/it_IT/img/local_store_info/parma/index/slider/freccia.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-40px 0;
right:0px;
}
a.nivo-prevNav {
left:0px;
}
.nivo-caption {
font-family: Verdana;
}
.nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
color:#fff;
}
.nivoSlider {
margin-bottom:0px; /* Tweak this to push content down */
}
.nivo-controlNav a.active img {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}
.nivo-controlNav img {
display:inline;
position:relative;
margin-right:1px;
}
-->
</style>
<script src="/ms/it_IT/img/local_store_info/parma/parma_angolo_occasioni/slider/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var D =jQuery.noConflict();
(function(D) {
var NivoSlider = function(element, options){
//Defaults are below
var settings = D.extend({}, D.fn.nivoSlider.defaults, options);
//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
randAnim: '',
running: false,
paused: false,
stop: false
};
//Get this slider
var slider = D(element);
slider.data('nivo:vars', vars);
slider.css('position','relative');
slider.addClass('nivoSlider');
//Find our slider children
var kids = slider.children();
kids.each(function() {
var child = D(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
//Get img width & height
var childWidth = child.width();
if(childWidth == 0) childWidth = child.attr('width');
var childHeight = child.height();
if(childHeight == 0) childHeight = child.attr('height');
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
//Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}
//Get initial image
if(D(kids[vars.currentSlide]).is('img')){
vars.currentImage = D(kids[vars.currentSlide]);
} else {
vars.currentImage = D(kids[vars.currentSlide]).find('img:first');
}
//Show initial link
if(D(kids[vars.currentSlide]).is('a')){
D(kids[vars.currentSlide]).css('display','block');
}
//Set first background
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
//Add initial slices
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i == settings.slices-1){
slider.append(
D('<div class="nivo-slice"></div>').css({ left [decu]sliceWidth*i)+'px', width [decu]slider.width()-(sliceWidth*i))+'px' })
);
} else {
slider.append(
D('<div class="nivo-slice"></div>').css({ left [decu]sliceWidth*i)+'px', width:sliceWidth+'px' })
);
}
}
//Create caption
slider.append(
D('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
);
//Process initial caption
if(vars.currentImage.attr('title') != ''){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = D(title).html();
D('.nivo-caption p', slider).html(title);
D('.nivo-caption', slider).fadeIn(settings.animSpeed);
}
//In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
//Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');
//Hide Direction nav
if(settings.directionNavHide){
D('.nivo-directionNav', slider).hide();
slider.hover(function(){
D('.nivo-directionNav', slider).show();
}, function(){
D('.nivo-directionNav', slider).hide();
});
}
D('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide-=2;
nivoRun(slider, kids, settings, 'prev');
});
D('a.nivo-nextNav', slider).live('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
//Add Control nav
if(settings.controlNav){
var nivoControl = D('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
D('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
D('.nivo-controlNav a', slider).live('click', function(){
if(vars.running) return false;
if(D(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
vars.currentSlide = D(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//Keyboard Navigation
if(settings.keyboardNav){
D(window).keypress(function(event){
//Left
if(event.keyCode == '37'){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide-=2;
nivoRun(slider, kids, settings, 'prev');
}
//Right
if(event.keyCode == '39'){
if(vars.running) return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
}
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
//Restart the timer
if(timer == '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
//Event when Animation finishes
slider.bind('nivo:animFinished', function(){
vars.running = false;
//Hide child links
D(kids).each(function(){
if(D(this).is('a')){
D(this).css('display','none');
}
});
//Show current link
if(D(kids[vars.currentSlide]).is('a')){
D(kids[vars.currentSlide]).css('display','block');
}
//Restart the timer
if(timer == '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
//Trigger the afterChange callback
settings.afterChange.call(this);
});
// Reset slice width before animations run
var resetSliceWidth = function(slider, settings){
var slices = D('.nivo-slice', slider);
var i = 0;
slices.each(function(){
var slice = D(this);
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i == settings.slices-1){
slice.css('width', (slider.width()-(sliceWidth*i)) + 'px');
} else {
slice.css('width', sliceWidth + 'px');
}
i++;
});
}
// Private run method
var nivoRun = function(slider, kids, settings, nudge){
//Get our vars
var vars = slider.data('nivo:vars');
//Trigger the lastSlide callback
if(vars && (vars.currentSlide == vars.totalSlides - 1)){
settings.lastSlide.call(this);
}
// Stop
if((!vars || vars.stop) && !nudge) return false;
//Trigger the beforeChange callback
settings.beforeChange.call(this);
//Set current background before change
if(!nudge){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
} else {
if(nudge == 'prev'){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
if(nudge == 'next'){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
}
vars.currentSlide++;
//Trigger the slideshowEnd callback
if(vars.currentSlide == vars.totalSlides){
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
//Set vars.currentImage
if(D(kids[vars.currentSlide]).is('img')){
vars.currentImage = D(kids[vars.currentSlide]);
} else {
vars.currentImage = D(kids[vars.currentSlide]).find('img:first');
}
//Set acitve links
if(settings.controlNav){
D('.nivo-controlNav a', slider).removeClass('active');
D('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
}
//Process caption
if(vars.currentImage.attr('title') != ''){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = D(title).html();
if(D('.nivo-caption', slider).css('display') == 'block'){
D('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
D(this).html(title);
D(this).fadeIn(settings.animSpeed);
});
} else {
D('.nivo-caption p', slider).html(title);
}
D('.nivo-caption', slider).fadeIn(settings.animSpeed);
} else {
D('.nivo-caption', slider).fadeOut(settings.animSpeed);
}
//Set new slice backgrounds
var i = 0;
D('.nivo-slice', slider).each(function(){
var sliceWidth = Math.round(slider.width()/settings.slices);
D(this).css({ height:'0px', opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
i++;
});
if(settings.effect == 'random'){
var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','slideInRight','slideInLeft');
vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
if(vars.randAnim == undefined) vars.randAnim = 'fade';
}
//Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') != -1){
var anims = settings.effect.split(',');
vars.randAnim = anims[Math.floor(Math.random()*(anims.length))];
if(vars.randAnim == undefined) vars.randAnim = 'fade';
}
//Run effects
vars.running = true;
if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
var timeBuff = 0;
var i = 0;
resetSliceWidth(slider, settings);
var slices = D('.nivo-slice', slider);
if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = D('.nivo-slice', slider)._reverse();
slices.each(function(){
var slice = D(this);
slice.css({ 'top': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
var timeBuff = 0;
var i = 0;
resetSliceWidth(slider, settings);
var slices = D('.nivo-slice', slider);
if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = D('.nivo-slice', slider)._reverse();
slices.each(function(){
var slice = D(this);
slice.css({ 'bottom': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' ||
settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
var timeBuff = 0;
var i = 0;
var v = 0;
resetSliceWidth(slider, settings);
var slices = D('.nivo-slice', slider);
if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = D('.nivo-slice', slider)._reverse();
slices.each(function(){
var slice = D(this);
if(i == 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
}
else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
var timeBuff = 0;
var i = 0;
resetSliceWidth(slider, settings);
D('.nivo-slice', slider).each(function(){
var slice = D(this);
var origWidth = slice.width();
slice.css({ top:'0px', height:'100%', width:'0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
var firstSlice = D('.nivo-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': slider.width() + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
}
else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){
var firstSlice = D('.nivo-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
}
else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){
var firstSlice = D('.nivo-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('nivo:animFinished');
});
}
}
// For debugging
var trace = function(msg){
if (this.console && typeof console.log != "undefined")
console.log(msg);
}
// Start / Stop
this.stop = function(){
if(!D(element).data('nivo:vars').stop){
D(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
}
this.start = function(){
if(D(element).data('nivo:vars').stop){
D(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
}
//Trigger the afterLoad callback
settings.afterLoad.call(this);
};
D.fn.nivoSlider = function(options) {
return this.each(function(){
var element = D(this);
// Return early if this element already has a plugin instance
if (element.data('nivoslider')) return;
// Pass options to plugin constructor
var nivoslider = new NivoSlider(this, options);
// Store plugin object in this element's data
element.data('nivoslider', nivoslider);
});
};
//Default settings
D.fn.nivoSlider.defaults = {
effect: 'slideInLeft',
slices: 4,
animSpeed: 200,
pauseTime: 4000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
controlNavThumbs: false,
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true,
pauseOnHover: true,
manualAdvance: false,
captionOpacity: 0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};
D.fn._reverse = [].reverse;
})(jQuery);
</script>
<script type="text/javascript">
D(window).load(function() {
var D =jQuery.noConflict();
D('#slider').nivoSlider({
effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown,slideInLeft'
slices:4, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:200, // Slide transition speed
pauseTime:4000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<script type="text/javascript">
D(window).load(function() {
var D =jQuery.noConflict();
D('#slider2').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
slices:4, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:300, // Slide transition speed
pauseTime:5000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<script type="text/javascript">
D(window).load(function() {
var D =jQuery.noConflict();
D('#slider3').nivoSlider({
effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
slices:4, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:200, // Slide transition speed
pauseTime:4000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<script type="text/javascript">
D(window).load(function() {
var D =jQuery.noConflict();
D('#slider4').nivoSlider({
effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
slices:4, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:200, // Slide transition speed
pauseTime:4000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<div id="slider" class="nivoSlider" style="width:670px; height:390px; position:relative;" >
<img src="/image/exemple3.gif" alt=" "/>
<img src="/ image/exemple4.gif" alt=" "/>
<img src="/ image/exemple5.gif" alt=" "/>
<img src="/ image/exemple6.gif" alt=" "/>
<img src="/ image/exemple7.gif" alt=" "/>
<img src="/ image/exemple8.gif" alt=" "/>
</div>
<div style="clear:both;">
<div style="width:670px; font-size:11px; margin-top:0px; margin-bottom:0px; line-height:14px;">
<div style="font-size:18px; margin-bottom:6px;"> </div>
Mon problème :
Je souhaite intégrer le second code (ou en tout cas le même principe) dans le premier.
Lorsque je clique sur la "bannière", le "défilé" s'affiche.
Merci d'avance à tous ceux qui pourront m'aider,
Bonne journée,
Loïc
Modifié par remibob (18 May 2015 - 12:28)