Galerie de photos et Javascript

[toto2525]

Salut,

Je souhaite utiliser le script d'une galerie de photo (que j'ai trouvé sur cette page http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/#comment-5879) qui affiche une image au centre et en dessous des numéros (1 2 3 4), lorsqu'on clique sur ces numéros l'image apparait au centre (au-dessus), je souhaiterai maintenant pouvoir cliquer sur l'image au centre pour ouvrir une fenêtre popup afin d'agrandir cette image, je n'y connais rien en javascript, quelqu'un peut-il me dire ce que je dois incorporer/modifier comme code dans mon javascript ci-dessous :

Code: Tout sélectionner

(function($) {
    $.fn.jqGalScroll = function(options){
        return this.each(function(i){
            var el = this
            el.curImage = 0;
            el.jqthis = $(this).css({position:'relative'});
            el.jqchildren = el.jqthis.children();
            el.opts = $.extend({}, jqGalScroll, options);
            el.index = i;
            el.totalChildren = el.jqchildren.size();
            var width,height;
           
            switch(el.opts.direction){
                case 'horizontal':
                    width = el.totalChildren *el.opts.width;
                    height = el.opts.height;
                    break;
                case 'vertical':
                    width = el.opts.width;
                    height = el.totalChildren *el.opts.height;
                    break;
                default:
                    width = el.totalChildren *el.opts.width;
                    height = el.totalChildren *el.opts.height;
                    break;
            };
           
            el.container = $('<div id="jqGS'+i+'" class="jqGSContainer">').css({position:'relative'});
            el.ImgContainer = $('<div class="jqGSImgContainer" style="height:'+el.opts.height+'px;position:relative;overflow:hidden">')
                                .css({height:el.opts.height,width:el.opts.width,position:'relative',overflow:'hidden'});
            el.jqthis.css({height:height,width:width});
           
            el.jqthis.wrap(el.container);
            el.jqthis.wrap(el.ImgContainer);
            el.pagination = $('<div class="jqGSPagination">');
            el.jqthis.parent().parent().append(el.pagination);
            var jqul = $('<ul>').appendTo(el.pagination);
            var pos = {x:0,y:0};
           
            el.jqchildren
            .each(function(j){
                var selected = '';
                if(j == 0) selected = 'selected';
               
                var $a = $('<a href="#'+(j)+'" title="Cliquez pour afficher la photo" class="'+selected+'">'+(j+1)+'</a>').click(function(){
                    var href = this.index;//href.replace(/^.*#/, '');
                    el.pagination.find('.selected').removeClass('selected');
                    $(this).addClass('selected');
                    var params = {};
                    if( el.opts.direction == 'diagonal'){
                        params = {right:(el.opts.width*href),bottom:(el.opts.height*href)}
                    }
                    else if( el.opts.direction == 'vertical'){
                        params = {bottom:(el.opts.height*href)}
                    }
                    else if( el.opts.direction == 'horizontal'){
                        params = {right:(el.opts.width*href)}
                    };
                   
                    el.jqthis.stop().animate(params,el.opts.speed, el.opts.ease);
                    index = href;
                    return false;
                });

                var n = $a.get(0);

                n.index = j;

                $('<li>').appendTo(jqul).append($a);

                if( el.opts.direction == 'diagonal'){
                    pos.x = j * el.opts.width;
                    pos.y = j * el.opts.height;
                }
                else if( el.opts.direction == 'horizontal'){
                    pos.x = j * el.opts.width;
                }
                else if( el.opts.direction == 'vertical'){
                    pos.y = j * el.opts.height;
                };

                var jqchild = $(this).css({height:el.opts.height,width:el.opts.width,position:'absolute',left:pos.x, top:pos.y});

                var jqimg = jqchild.find('img').hide()
               
                if(jqimg.parent().is('a')){
                    var p = jqimg.parent();
                    jqimg.get(0).linkHref = p.attr('href');
                    p.remove();
                    jqimg.appendTo(jqchild);
                };

                jqimg.click(function(){
                    var next = n.index + 1;
                    if((n.index + 1) == el.totalChildren ){
                        el.pagination.find('[href$=#0]').click();
                    }
                    else{
                        el.pagination.find('[href$=#'+next+']').click();
                    }
                });

                var $loader = $('<div class="jqGSLoader">').appendTo(jqchild);
                var $titleHolder = $('<div class="jqGSTitle">').appendTo(jqchild).css({opacity:el.opts.titleOpacity}).hide();
                var image = new Image();
                image.onload = function(){
                    image.onload = null;
                    $loader.fadeOut();
                    if(window.navigator.appName == 'Microsoft Internet Explorer')
                    {
                    jqimg.css({marginLeft:-image.width*.42,marginTop:-image.height*.54,position:'absolute',left:'50%',top:'50%'}).fadeIn();
                    }
                    else
                    {
                    jqimg.css({marginLeft:-image.width*.5,marginTop:-image.height*.5,position:'absolute',left:'50%',top:'50%'}).fadeIn();
                    }
                    var alt = jqimg.attr('alt');
                    if(typeof alt != 'undefined'){
                        $titleHolder.text(alt).fadeIn();
                    }
                };
                image.src = jqimg.attr('src');
            });

           
        }); // end : this.each(function()
    };  // end : $.fn.jqGalScroll
    jqGalScroll = {
        ease: null,
        speed:1500,
        height: 210,
        width: 210,
        titleOpacity : .0,
        direction : 'horizontal' // vertical horizontal diagonal
    };
})(jQuery);


Deuxième question : est-ce possible de remplacer les numéros (1 2 3 4) qui se trouve en dessous de l'image principale par des petites vignettes de ces images ? Que dois-je modifier dans mon code javascript ?

Punaise c'est pas facile le javascript, ça fait quelques jours que je suis là-dessus à tourner en rond...

Merci pour votre aide.

[SpeedAirMan]

Ce script date de 2007 et n'est peut être plus maintenu / mis à jour.

Il existe d'autres scripts très bien, + récents, mieux maintenus (Nivo Slider par exemple).

[toto2525]

Il existe d'autres scripts très bien, + récents, mieux maintenus (Nivo Slider par exemple).

Apparement on ne peut pas cliquer sur l'image principale pour l'agrandir avec Nivo Slider, connais-tu d'autres scripts du même genre qui soit comptablible avec la plupart des navigateurs, avec thumbnails et image cliquable sur l'image principale ?

[spout]

jqGalScroll n'a plus l'air mis à jour. Et je ne vois pas d'option pour y mettre un callback sur onclick.
Donc en effet tu va devoir modifier directement le code de jqGalScroll.

Perso je me tournerais vers un plugin jQuery plus répandu. Et c'est pas ça qui manque:
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-sl ... -tutorials
...
Et pour faire ton choix pour le lightbox: http://planetozh.com/projects/lightbox-clones/

[toto2525]

Merci pour les liens spout.

C'est vrai qu'il y a une profusion de scripts mais je n'ai pas trouvé un script qui répond à tous mes critères :

1) fenêtre principale ou l'on affiche une image de 200x200 pixels (par exemple).
2) en dessous de cette fenêtre, affichage de petites vignettes de mes images (par exemple de 40x40 pixels).
3) lecture à la fois des fichiers images et flash swf (la vidéo de 200x200px doit tourner dans la fenêtre principale lorsqu'on clique sur la petite vignette correspondante).
4) possibilités de cliquer sur l'image (ou la vidéo) de 200x200pixels afin de l'agrandir.
5) compatible avec la plupart des navigateurs.

Si vous avez un script qui répond à tous ces critères je suis preneur (même payant)

[GUITEL]

Celui ci répond à une bonne partie de tes demandes je crois

-http://pikachoose.com/demo/

voir lien: Integrated with Fancybox (How-to Guide)

[toto2525]

Merci pour ta réponse Guitel mais le srcipt que tu proposes ne répond qu'en partie à mes critères.

J'ai essayé et testé pas mal de script et je reviens toujours au premier http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/#comment-5879) dont je parle dans ce post et qui permet de lire des images + du flash swf et d'avoir des petites vignettes sous l'image principale (même si ce ne sont pas des vignettes des images mais des nombres : 1 2 3 4, etc...).

Reste à personaliser ce script pour que je puisse cliquer sur l'image principale pour l'agrandir, avez-vous une idée du code javascript que je dois ajouter/modifier pour que cela fonctionne avec ce script (voir le javascript plus haut dans ce post) ?

Merci pour votre aide, 1 semaine que je suis là-dessus

[Marie-Aude]

De mémoire il y a une version extended de lightbox qui permet ça. La taille et le positionnement des images, c'est du CSS

[toto2525]

Je suis arrivé à faire ma gallerie avec mes vignettes en dessous, je peux afficher à la fois des images + une vidéo en swf mais j'ai un souci avec ma vidéo, je voudrais que l'on puisse cliquer dessus afin de l'agrandir mais je n'y arrive pas, j'ai essayé le code ci-dessous mais ça fonctionne pas (il n'y a pas de lien cliquable lorsque je pose ma souris sur ma vidéo) :

Code: Tout sélectionner

<a href="javascript:void(0);" onclick="OuvrePopUp3();">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID="mapcontrols" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="250" height="250">
<param name=movie value="ma_video.swf">
<param name=quality value=high>
<embed name="mapcontrols" src="ma_video" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="250" height="250">
</embed>
</object>
</a>


J'ai essayé de positionner une image (une loupe) devant ma vidéo dans un span qui soit cliquable mais là non plus ça marche pas, on ne voit pas la loupe, je pense que ce doit être un problème de z-index avec le swf, avez-vous une idée ou un bout de code pour rendre cliquable un swf ou bien pour positionner sur le swf en haut à droite une loupe qui soit cliquable ?

Merci pour votre aide.