Personnalisation slider Jquery

bonjours à tous,

Je viens a vous car j'ai réalisé a l'aide d'un tuto un slider qui fonction bien mais je voudrais encore plus le personnalisé.

Voici le lien :
http://www3.onecomputer.net/buzzsurleweb/portfolio.php

et voici voici ce que je souhaiterai obtenir :
http://www.bleuroy.com

voici mon js :

$(document).ready(function(){
    s = new slider ("#galerie");
});

var slider = function(id){
    var self=this;
    this.div = $(id);
    this.slider = this.div.find(".slider")
    this.largeurCache = this.div.width();
    this.largeur=0;
    this.div.find ('a').each (function(){
        self.largeur+=$(this).width();
        self.largeur+=parseInt($(this).css("padding-left"));
        self.largeur+=parseInt($(this).css("margin-left"));
        self.largeur+=parseInt($(this).css("padding-right"));
        self.largeur+=parseInt($(this).css("margin-right"));
        });
    this.prec = this.div.find(".prec");
    this.suiv = this.div.find(".suiv");
    this.saut = this.largeurCache/2;
    this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
    this.courant=0;
    
    this.suiv.click(function(){
        if(self.courant<=self.nbEtapes){
            self.courant++;
            self.slider.animate({
                left:-self.courant*self.saut
            },1000);
        }

    });
    
    this.prec.click(function(){
        if(self.courant>0){
            self.courant--;
            self.slider.animate({
                left:-self.courant*self.saut
            },1000);
        }

    });
    
}

mon css :

#name_portfolio{ width:100%; height:73px; float:left;}
    #name_portfolio img{ width:497px; height:73px; float:right;}
    
#global_content_portfolio{ width:100%; min-height:50px; background-color:black; float:left;}
    #galerie{width:100%; background:red; height:430px; position:relative; overflow:hidden;}
        .suiv{width:30px; height:53px; background:url(../images/fleche.png) top right no-repeat; position:absolute; right:0; top:0; cursor:pointer;}
        .suiv:hover{ background-position:-48px -70px ;}
        .prec{width:30px; height:53px; background:url(../images/fleche.png) top left no-repeat; position:absolute; left:0; top:0; cursor:pointer;}
        .prec:hover{ background-position:0 -70px;}
        
        .slider{ width:5000px; height:430px; position:relative;}

en vous remerciant
Modifié par trainsrenton (11 Apr 2011 - 11:52)

Salut,

1 - merci d'utiliser les balises de codes à ta disposition.
2 - Dans le code que tu as mis, je ne vois que la partie du mouvement, pas celle de l'effet recherché ? Nous ne te fournirons pas de code tout prêt, nous sommes là pour aider, par pour faire le boulot à ta place

je n'attends absolument pas un code tout fait mais c'est juste que je ne sais pas du tout comment faire pour obtenir l'effet escompté c'est pour cela que je suis ici.
le slider actuel a était réalisé a l'aide d'un tutoriel, et je n'ai pas les connaissance suffisante pour developer cela tout seul

dans 1 premier temps j'aimerai que mon slider tourne en boucle qu'il n'y est pas de fin ...

Ensuite mettre un visuel en avant en le centrant bien et en mettant les autre en opacité.

Ben le mieux c'est d'étudier comment l'effet a été créé… Notamment : http://www.bleuroy.com/js/fonctions.js

je vais essayer si j'ai des questions plus précise je reviendrai vers vous merci

j'ai analyser le script je l'ai également copier entièrement ainsi que le html pour pour l'adapter plus facilement seulement le script ne se lance pas ... cela serai bien que sa fonction avant que je commence à l'adapter à mon site ...

en début de script ils ont utilisé cela :

jQuery.noConflict();
jQuery(function($) {

mais si le peut de connaissance que j'ai est bonne cela s'utilise pour les cms ou autre plateform?

comment je devrais lancer mon script ?

actuellement j'ai exactement le même rendu que eu si je désactive javascript de mon navigateur ...

un petit up !!

je vous met mon code pourquoi le script ne se lance t-il pas ?

$(function($) {

    //CAROUSSEL BULLEINFO
    function expandContainer(){$(this).children("div.texte").slideToggle(300);}
    function resetContainer(){$(this).children("div.texte").slideToggle(300);}
    $(".bulleinfo").hoverIntent(expandContainer, resetContainer);

    //CAROUSSEL
    $(".carousel li").fadeTo(0, 0.3);
    $("#ref3").fadeTo(0, 1);
    
    $('.newCarousel').each(function(){
        var animationActive = false;
        var idCarousel = '#'+$(this).attr('id')+' ';
        
        
        var elementWidth = $(idCarousel + '.carousel li').width();
        var numberElements = $(idCarousel + '.carousel li').length;
        var c;
        var d;
        $(idCarousel + '.carousel').css('width', (numberElements*2)*elementWidth).wrap(document.createElement('div')).parent().addClass('jcarousel-clipp');
        
        // Gestion de defilement arriere
        $(idCarousel + '.carouselPrev a').bind('click', function(){
            
            //Gestion numero
            var numId=parseFloat($("#carouselCompteur").html());
            if(numId==1) $("#carouselCompteur").html(numberElements);
            else $("#carouselCompteur").html(numId-1);
            var numId=parseFloat($("#carouselCompteur").html());
            
            //Grisement
            $(".carousel li").fadeTo(300, 0.3);
            $("#ref"+numId+"").fadeTo(1000, 1);
            
            if(animationActive != true) {
                animationActive = true;
                
                $(idCarousel + '.carousel li:last').clone().insertBefore(idCarousel + '.carousel li:last');
                $(idCarousel + '.carousel li:last').insertBefore(idCarousel + '.carousel li:first');
                
                var marginEnd = ($(idCarousel + '.carousel').css('marginLeft'));
                var marginBegin = marginEnd.replace(/px/, '');
                marginBegin = marginBegin-elementWidth;
                marginBegin = marginBegin+'px';
                
                $(idCarousel + '.carousel').css('marginLeft', marginBegin);
                $(idCarousel + '.carousel').stop().animate({'marginLeft': marginEnd}, 350, function() {
                    $(idCarousel + '.carousel li:last').remove();
                    animationActive = false
                });
            }

            $('.navCarousel li.hidden').removeClass('hidden');
            $('.navCarousel ul li:last]').clone().insertBefore('.navCarousel ul li:first');
            $('.navCarousel ul li:last]').insertBefore('.navCarousel ul li:first');            
            $('.navCarousel ul li:last]').addClass('hidden');
            
            
            return false;
        });
        
        // Gestion de defilement avant
        $(idCarousel + '.carouselNext a').bind('click', function(){
            
            //gestion numero
            var numId=parseFloat($("#carouselCompteur").html());
            if(numId==numberElements) $("#carouselCompteur").html(1);
            else $("#carouselCompteur").html(numId+1);
            var numId=parseFloat($("#carouselCompteur").html());
            
            //Grisement
            $(".carousel li").fadeTo(300, 0.3);
            $("#ref"+numId+"").fadeTo(1000, 1);
            
            if(animationActive != true) {
                animationActive = true;
                
                $(idCarousel + '.carousel li:first').clone().insertAfter(idCarousel + '.carousel li:first');
                $(idCarousel + '.carousel li:first').insertAfter(idCarousel + '.carousel li:last');
                
                var marginEnd = ($(idCarousel + '.carousel').css('marginLeft'));
                var marginBegin = marginEnd.replace(/px/, '');
                marginBegin = marginBegin-elementWidth;
                marginBegin = marginBegin+'px';
                
                $(idCarousel + '.carousel').stop().animate({'marginLeft': marginBegin}, 350, function() {
                    $(idCarousel + '.carousel').css('marginLeft', marginEnd);
                    $(idCarousel + '.carousel li:first').remove();
                    animationActive = false
                });
            }
            return false;
        });
        
    });
    

});

nouveau petit up

Pour info, le code ci-dessous permet d'attribuer au symbole $ une autre valeur (dans l'exemple elle prend la valeur jQuery). Ça permet d'éviter les conflits avec d'autres libraires js (prototype.js, scriptaculous, etc…) qui eux aussi utilisent le symbole $.

jQuery.noConflict(); 

(même si dans leur code, ils continuent à utiliser le symbole $, ce qui est assez étrange… 'fin bref).
Plus d'info ici : http://api.jquery.com/jQuery.noConflict/


Sinon, tu appelles le plug-in hoverIntent :

$(".bulleinfo").hoverIntent(expandContainer, resetContainer);

Et j'imagine que tu n'appelles pas le fichier js correspondant à ce plug-in.


Copier-coller bêtement sans essayer de comprendre ça ne t'amènera à rien malheureusement . Tu devrais commencer par installer les extensions Web developer et Firebug (sur Firefox et Chrome) qui au moins te permettront de savoir si ton code comporte des erreurs.

je possède firebug deja mais je ne sais pas m'en servir pour le js je m'en sert pour se qui est css