Sujet Précédent Sujet Suivant

Simple problème bouton 1ER plan javascript

Résolu
quinton75 Messages postés 44 Date d'inscription mercredi 13 octobre 2010 Statut Membre Dernière intervention 6 juillet 2011 - 10 févr. 2011 à 10:42
dvwyns Messages postés 159 Date d'inscription mardi 2 janvier 2007 Statut Membre Dernière intervention 7 mai 2012 - 15 févr. 2011 à 15:33
Bonjour

J'ai repris le modele suivant
http://www.ndoherty.biz/demos/coda-slider/2.0/#1

A la place du texte qui defile j'ai intégré des images.

Par contre les boutons de navigation "left"(#coda-nav-left) and "right"(#coda-nav-right) je voudrais les introduire dans l'image (chaque image il y aura deja un lien).
Donc il faudrait que au dessus de chaque image (avec son lien) il y ait à droite et à gauche les boutons de navigations...


Ci-dessous les codes sources:

HTML 
]<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Yellow Korner</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta name="author" content="Niall Doherty" />

<!-- Begin Stylesheets -->
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->

<!-- Begin JavaScript -->
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascripts/jquery.coda-slider-2.0.js"></script>
 <script type="text/javascript">
$().ready(function() {
$('#coda-slider-1').codaSlider();
});
 </script>
<!-- End JavaScript -->

</head>

 
Yellowkorner


<noscript>


        Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:


        <ol>
            <li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of Learn how to enable JavaScript.</li>
        </ol>
    

</noscript>





  




1


 , http://www.yellowkorner.com,  http://www.yellowkorner.com








3

http://www.yellowkorner.com






<!-- .coda-slider -->

<!-- .coda-slider-wrapper -->


</html>


CSS 
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

/* Insignificant stuff, for demo purposes */

body { padding: 20px }
.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }

/* Most common stuff you'll need to change */

.coda-slider-wrapper { padding: 20px 0 }
.coda-slider { background: #ebebeb }
#Layer1 {margin-top: 170px}
#Layer2 {margin-top: 170px; margin-left: 945px}

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }

/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 600px } 

/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 977px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }

/* Arrow styling */
.coda-nav-left a { background-image: url(images/FLECHE-GAUCHE-NON-SELECTIONNE.jpg); color: #fff; margin-top: 200px; height: 34px;}
.coda-nav-right a { background-image: url(images/FLECHE-DROITE-NON-SELECTIONNE.jpg); color: #fff; margin-top: 200px; height: 34px; }
/* Tab nav */
.coda-nav ul li a.current { background: #39c }

/* Panel padding */
.coda-slider .panel-wrapper { padding: 0px }

/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: inline }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }

/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }


JAVASCRIPT 
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

$(function(){
// Remove the coda-slider-no-js class from the body
$("body").removeClass("coda-slider-no-js");
// Preloader
$(".coda-slider").children('.panel').hide().end().prepend('Loading...

');
});

var sliderCount = 1;

$.fn.codaSlider = function(settings) {

settings = $.extend({
autoHeight: true,
autoHeightEaseDuration: 1000,
autoHeightEaseFunction: "easeInOutExpo",
autoSlide: false,
autoSlideInterval: 7000,
autoSlideStopWhenClicked: true,
crossLinking: true,
dynamicArrows: true,
dynamicArrowLeftText: "&#171; left",
dynamicArrowRightText: "right &#187;",
dynamicTabs: true,
dynamicTabsAlign: "center",
dynamicTabsPosition: "top",
externalTriggerSelector: "a.xtrig",
firstPanelToLoad: 1,
panelTitleSelector: "h2.title",
slideEaseDuration: 1000,
slideEaseFunction: "easeInOutExpo"
}, settings);

return this.each(function(){

// Uncomment the line below to test your preloader
// alert("Testing preloader");

var slider = $(this);

// If we need arrows
if (settings.dynamicArrows) {
slider.parent().addClass("arrows");
slider.before('
[# ' + settings.dynamicArrowLeftText + ']
');
slider.after('
[# ' + settings.dynamicArrowRightText + ']
');
};

var panelWidth = slider.find(".panel").width();
var panelCount = slider.find(".panel").size();
var panelContainerWidth = panelWidth*panelCount;
var navClicks 0; // Used if autoSlideStopWhenClicked true

// Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
$('.panel', slider).wrapAll('

');
// Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
$(".panel-container", slider).css({ width: panelContainerWidth });

// Specify the current panel.
// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
var currentPanel = parseInt(location.hash.slice(1));
var offset = - (panelWidth*(currentPanel - 1));
$('.panel-container', slider).css({ marginLeft: offset });
// If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) { 
var currentPanel = settings.firstPanelToLoad;
var offset = - (panelWidth*(currentPanel - 1));
$('.panel-container', slider).css({ marginLeft: offset });
// Otherwise, we'll just set the current panel to 1...
} else { 
var currentPanel = 1;
};

// Left arrow click
$("#coda-nav-left-" + sliderCount + " a").click(function(){
navClicks++;
if (currentPanel == 1) {
offset = - (panelWidth*(panelCount - 1));
alterPanelHeight(panelCount - 1);
currentPanel = panelCount;
slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
} else {
currentPanel -= 1;
alterPanelHeight(currentPanel - 1);
offset = - (panelWidth*(currentPanel - 1));
slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
};
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
return false;
});

// Right arrow click
$('#coda-nav-right-' + sliderCount + ' a').click(function(){
navClicks++;
if (currentPanel == panelCount) {
offset = 0;
currentPanel = 1;
alterPanelHeight(0);
slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
} else {
offset = - (panelWidth*currentPanel);
alterPanelHeight(currentPanel);
currentPanel += 1;
slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().next().find('a').addClass('current');
};
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
return false;
});

// If we need a dynamic menu
if (settings.dynamicTabs) {
var dynamicTabs = '

';
switch (settings.dynamicTabsPosition) {
case "bottom":
slider.parent().append(dynamicTabs);
break;
default:
slider.parent().prepend(dynamicTabs);
break;
};
ul = $('#coda-nav-' + sliderCount + ' ul');
// Create the nav items
$('.panel', slider).each(function(n) {
ul.append('<li class="tab' + (n+1) + '">+ (n+1) + ' ' + $(this).find(settings.panelTitleSelector).text() + '</li>');												
});
navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
ul.parent().css({ width: navContainerWidth });
switch (settings.dynamicTabsAlign) {
case "center":
ul.css({ width: ($("li", ul).width() + 2) * panelCount });
break;
case "right":
ul.css({ float: 'right' });
break;
};
};

// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});

// External triggers (anywhere on the page)
$(settings.externalTriggerSelector).each(function() {
// Make sure this only affects the targeted slider
if (sliderCount == parseInt($(this).attr("rel").slice(12))) {
$(this).bind("click", function() {
navClicks++;
targetPanel = parseInt($(this).attr("href").slice(1));
offset = - (panelWidth*(targetPanel - 1));
alterPanelHeight(targetPanel - 1);
currentPanel = targetPanel;
// Switch the current tab:
slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (targetPanel - 1) + ') a').addClass('current');
// Slide
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
};
});

// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
$("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
// If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
$("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
// Otherwise we must be loading Panel 1, so make the first tab the current one.
} else {
$("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
};

// Set the height of the first panel
if (settings.autoHeight) {
panelHeight = $('.panel:eq(' + (currentPanel - 1) + ')', slider).height();
slider.css({ height: panelHeight });
};

// Trigger autoSlide
if (settings.autoSlide) {
slider.ready(function() {
setTimeout(autoSlide,settings.autoSlideInterval);
});
};

function alterPanelHeight(x) {
if (settings.autoHeight) {
panelHeight = $('.panel:eq(' + x + ')', slider).height()
slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
};
};

function autoSlide() {
if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
if (currentPanel == panelCount) {
var offset = 0;
currentPanel = 1;
} else {
var offset = - (panelWidth*currentPanel);
currentPanel += 1;
};
alterPanelHeight(currentPanel - 1);
// Switch the current tab:
slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
// Slide:
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
setTimeout(autoSlide,settings.autoSlideInterval);
};
};

// Kill the preloader
$('.panel', slider).show().end().find("p.loading").remove();
slider.removeClass("preload");

sliderCount++;

});
};

5 réponses

Réponse 1 / 5
dvwyns Messages postés 159 Date d'inscription mardi 2 janvier 2007 Statut Membre Dernière intervention 7 mai 2012
10 févr. 2011 à 16:51
Salut,

Je te propose de mettre dans le setting javascript "dynamicArrows: false"

Et de mettre dans l'html "
[# « left]
" pour le bouton de gauche.
Et
"
[# right »]
" pour le bouton de droite.

Les numéros qui se trouvent dans les id correspondent pour le bouton de gauche au 4eme slide et pour le bouton de droite au 2eme slide (on imagine qu'on est sur le premier slide)

Donc mtn avec les codes ci-dessus tu pourras utiliser les conseils que je t'ai fourni juste avant.

Dvwyns
3
Réponse 2 / 5
dvwyns Messages postés 159 Date d'inscription mardi 2 janvier 2007 Statut Membre Dernière intervention 7 mai 2012
10 févr. 2011 à 16:00
Salut,

Si j'ai bien compris, tu veux que les boutons défilent avec les images se trouvant dans le slideshow.

Tu peux faire ça en mettant:
la class panel en "position:relative" et tu mets dans le div de chaque panel le div contenant les boutons, ces derniers auront "position:absolute;left:0px;top:0px;z-index:2;" pour le bouton de gauche et "position:absolute;right:0px;top:0px;z-index:2;" pour le bouton de droite
Je me base sur le code de la page ou tu as été cherché ce slideshow.

Dvwyns
0
Réponse 3 / 5
quinton75 Messages postés 44 Date d'inscription mercredi 13 octobre 2010 Statut Membre Dernière intervention 6 juillet 2011
10 févr. 2011 à 16:19
Merci de ta réponse ....


Ou ça dans le html?? car il n'y pas pas le bouton sur le html cf le code ci-dessus....

Les boutons sont suelement mentionnées dans le javascript : exemple bouton gauchee
" Left arrow click
$("#coda-nav-left-"

Il se trouve dans le javascript


Et sinon non, en fait je voudrais que les boutons de navigation restent
0
Réponse 4 / 5
quinton75 Messages postés 44 Date d'inscription mercredi 13 octobre 2010 Statut Membre Dernière intervention 6 juillet 2011
11 févr. 2011 à 15:10
ou est ce que je mets "
[# « left]
"
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
dvwyns Messages postés 159 Date d'inscription mardi 2 janvier 2007 Statut Membre Dernière intervention 7 mai 2012
15 févr. 2011 à 15:33
Salut,

Sorry, ai pas eu bcp de temps ce weekend.
Mais bon, si tu as accepté ma réponse, j'imagine que tu as su décrypter mes commentaires ^^
N'hésites pas à mettre ton code pour les autres.

Dvwyns
0

Discussions similaires

planning + suivi de maintenance
ranok -
ranok -

33 réponses
Organiser un planning annuel pour le plan préventive d'un parc machine sous acce
sassene -
aminwmalih -

1 réponse
Gestion par calendrier des fiches journaliére du planning
EnguerrandP -
EnguerrandP -

21 réponses
gestion de planning employé
Xanders07 -
trigun2501 -

33 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
Rejoignez-nous