IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

banniere carrousel, image de départ


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Novembre 2009
    Messages : 4
    Par défaut banniere carrousel, image de départ
    bonjour à tous,
    J'ai un petit problème avec une banniere javascript.

    Ceci est une bannière javascript avec 5 images au survol des vignettes la banniere se déplace à sa position jusqu'à la pas de problème.
    Tout fonctionne sur mon serveur ici:
    http://www.denicher.ch/test.html

    Maintenant si je déplace ça sur un autre site internet, ma position initiale est la dernière image.
    http://www.vac.ch/home-new-presentation

    Pourtant se sont les 2 memes script du copier coller... bref je sèche complètement.
    Cela fait depuis hier que je cherche, quelqu'un pourrait t'il m'aider..

    Meilleures salutations



    Je vous ai joint le fichier javascript et j'utilise aussi les librairies jquery-1.4.4min.js jquery.cookie.js jquery.elastic.js jquery.event.hover.min.js jquery.localscroll.min.js jquery.placehold.js.

    Et ci dessous le fichier carrousel javascript qui contient le fonctionnement de la bannière.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
     
    (function() {
        // Automatic Infinite Carousel - http://jqueryfordesigners.com/automatic-infinite-carousel/
        $.fn.infiniteCarousel = function(autoscroll, scrollVisible) {
            return this.each(function() {
                // magic!
                    var $wrapper = $(this),
                    $slider = $wrapper.find('> ul').width(9999),
                    $items1 = $slider.find('> li'),
                    $single1 = $items1.filter(':first')
     
                single1Width = $single1.outerWidth(),
                    visible = Math.ceil($wrapper.innerWidth() / single1Width),
                    currentPage1 = 1,
                    pages = Math.ceil($items1.length / visible);
     
                /* TASKS */
     
                // 2. create the carousel padding on left and right (cloned)
                $items1.filter(':first').before($items1.slice(-visible).clone().addClass('cloned'));
                $items1.filter(':last').after($items1.slice(0, visible).clone().addClass('cloned'));
                $items1 = $slider.find('> li');
     
     
                // 3. reset scroll
                $wrapper.scrollLeft(single1Width * visible);
     
                //4. Image loading
                function loadImage(page) {
                    var $nextitem = $items1.get(page);
                    if ($nextitem != null) {
                        var $nextitem_ImageSrc = $nextitem.getAttribute('data-ImageSrc');
                        var $nextitemImg = $nextitem.getElementsByTagName('IMG')[0];
                        if ($nextitemImg != null) {
                            if ($nextitemImg.getAttribute('src') == null
                            | $nextitemImg.getAttribute('src') == '') {
                            	$nextitemImg.setAttribute('src', $nextitem_ImageSrc);
     
    							// activate maphighlight (mouseover effect for hotspots / imagemap) for the loaded image
                            	$(function () {
                            		$('#' + $nextitem_ImageSrc.getAttribute('data-ImageSrc')).maphilight();
                            	});
                            } else {
                                var srcMatch = $nextitemImg.getAttribute('src').match('gfx/grey960x384.gif');
                                if (srcMatch != null) {
                                    if (srcMatch[0] != null && srcMatch[0].length > 0) {
                                        $nextitemImg.setAttribute('src', $nextitem_ImageSrc);
                                    }
                                }
                            }
                        }
                    }
                }
     
                loadImage(1);
                loadImage(2);
     
                // 5. paging function
                function gotoPage(page) {
                    var dir = page < currentPage1 ? -1 : 1,
                        n = Math.abs(currentPage1 - page),
                        left = single1Width * dir * visible * n;
     
                    loadImage(page);
                    loadImage(page + 1);
     
                    $wrapper.filter(':not(:animated)').animate({
                        scrollLeft: '+=' + left
                    }, 400, function() {
                        // if page == last page - then reset position
                        if (page > pages) {
                            $wrapper.scrollLeft(single1Width * visible);
                            page = 1;
                        } else if (page == 0) {
                            page = pages;
                            $wrapper.scrollLeft(single1Width * visible * pages);
                        }
     
                        currentPage1 = page;
                    });
                }
     
                // 6. insert the back and forward link
                //$wrapper.after('<a href="#" id="carrouselBack" class="arrow back">&lt;</a><a href="#" id="carrouselForward" class="arrow forward">&gt;</a>');
     
                // 7. bind the back and forward links
                $('#carrouselBack').click(function() {
                    gotoPage(currentPage1 - 1);
                    return false;
                });
     
                $('#carrouselForward').click(function() {
                    gotoPage(currentPage1 + 1);
                    return false;
                });
     
                $(this).bind('goto', function(event, page) {
                    gotoPage(page);
                });
     
                // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
                $(this).bind('next', function() {
                    gotoPage(currentPage1 + 1);
                });
     
                $('#carrouselNav').delegate("li", "hoverenter", function(ev, hover) {
    				hover.distance(10)
    				hover.delay(100)
                    var index = $('#carrouselNav li').index(this);
    				var p = (index + 1 > pages) ? (index + 1) - pages : index + 1;
    				gotoPage(p)
    			})
     
            });
        };
     
        // http://code.google.com/p/jquery-infinite-carousel/
        $.fn.carousel = function(back, forward, options) {
            var sliderList = $(this).children()[0];
     
            if (sliderList) {
                var increment = $(sliderList).children().outerWidth("true"),
    				elmnts = $(sliderList).children(),
    				numElmts = elmnts.length,
    				sizeFirstElmnt = increment,
    				shownInViewport = Math.round($(this).width() / sizeFirstElmnt),
    				firstElementOnViewPort = 1,
    				isAnimating = false;
     
                for (i = 0; i < shownInViewport; i++) {
                    $(sliderList).css('width', (numElmts + shownInViewport) * increment + increment + "px");
                    $(sliderList).append($(elmnts[i]).clone());
                }
     
                $(back).click(function(event) {
                    if (!isAnimating) {
                        if (firstElementOnViewPort == 1) {
                            $(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                            firstElementOnViewPort = numElmts;
                        } else {
                            firstElementOnViewPort--;
                        }
                        $(sliderList).animate({
                            left: "+=" + increment,
                            y: 0,
                            queue: true
                        }, "swing", function() { isAnimating = false; });
                        isAnimating = true;
                    }
                });
     
                $(forward).click(function(event) {
                    if (!isAnimating) {
                        if (firstElementOnViewPort > numElmts) {
                            firstElementOnViewPort = 2;
                            $(sliderList).css('left', "0px");
                        } else {
                            firstElementOnViewPort++;
                        }
                        $(sliderList).animate({
                            left: "-=" + increment,
                            y: 0,
                            queue: true
                        }, "swing", function() { isAnimating = false; });
                        isAnimating = true;
                    }
                });
            }
        };
    })(jQuery);
     
     
     
    $(document).ready(function() {
    	// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
    	var autoscrolling = true;
    	$('#carrousel').infiniteCarousel().hover(
    		function() { autoscrolling = false; },
    		function() { autoscrolling = true; }
        );
    	$('#carrouselNav li').hover(
    		function() { autoscrolling = false; },
    		function() { autoscrolling = true; }
        );
    	setInterval(function() {
    		if (autoscrolling) {
    			$('#carrousel').trigger('next');
    		}
    	}, 6000);
     
    	$('#carrouselNav').carousel('#carrouselNavPrev', '#carrouselNavNext');
    });

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 9
    Par défaut
    J'ai résolu le problème de l'affichage de l'image:

    Juste après l'insertion jQuery, mettre un noConflict :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script src="http://www.denicher.ch/js/vac/jquery-1.4.4.min.js"></script>
    <script>
    jQuery.noConflict();
    </script>
    Dans le fichier carrousel.js j'ai modifié la ligne 1

    et la ligne 174 comme ceci :

    Mais maintenant problème dans la navigation cela ne fonctionne plus la liaison entre les miniatures et les images j'ai avec firebug le message suivant: HELP

    $.fn is undifined
    http://www.denicher.ch/js/vac/jquery.event.hover.min.js

    10h30 : RESOLU!!

    dans mon fichier jquery.event.hover.min.js à la premiere ligne
    j'avais (function()
    j'ai remplacé par (function($)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 30/03/2011, 14h31
  2. changer l'image d'une banniere en un clic
    Par ChTiRiBi dans le forum JSF
    Réponses: 5
    Dernier message: 22/04/2010, 16h32
  3. carrousel horizontal avec image au centre plus grosse
    Par NissqR dans le forum ActionScript 3
    Réponses: 0
    Dernier message: 26/03/2010, 15h07
  4. Image bouton et banniere
    Par Kitetkat dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 04/12/2009, 00h05
  5. flash carrousel autour d'une image au centre
    Par seb290585 dans le forum Flash
    Réponses: 1
    Dernier message: 19/11/2009, 15h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo