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 :

Fancybox et images cachées (galerie)


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut Fancybox et images cachées (galerie)
    Bonsoir à tous et bonne année,
    Me voilà confronté à un problème dont je ne trouve pas la réponse sur internet.
    J'ai un diaporama fancybox, ce dernier est composé de quatre images (cela pourrait être dix ou deux).
    Image un > image deux > image trois > image quatre.
    Ce que je cherche à faire : que chaque image soit indépendante, et n'ouvre pas la suivante.
    Pour tenter d'être clair, que l'image une soit l'ouverture d'une galerie, idem pour l'image deux etc...
    En cliquant sur l'image une, je ne tombe pas sur l'image deux mais sur une image "image_un_b", en cliquant sur la flèche droite "image_un_c" etc...
    (les images "un_b", "un_c" etc sont donc non visibles sur la page d'origine). Comme si un clic sur la flèche droite masquait un z-index de l'image concernée (je n'y connait rien en z-index, juste la connaissance de calques sur photoshop).
    Je ne sais pas si les scripts vous sont d'une grande utilité, mais au cas où :
    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
    	<script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			 *  Simple image gallery. Uses default settings
    			 */
     
    			$('.fancybox').fancybox();
     
    			/*
    			 *  Different effects
    			 */
     
    			// Change title type, overlay closing speed
    			$(".fancybox-effects-a").fancybox({
    				helpers: {
    					title : {
    						type : 'outside'
    					},
    					overlay : {
    						speedOut : 0
    					}
    				}
    			});
     
    			// Disable opening and closing animations, change title type
    			$(".fancybox-effects-b").fancybox({
    				openEffect  : 'none',
    				closeEffect	: 'none',
     
    				helpers : {
    					title : {
    						type : 'over'
    					}
    				}
    			});
     
    			// Set custom style, close if clicked, change title type and overlay color
    			$(".fancybox-effects-c").fancybox({
    				wrapCSS    : 'fancybox-custom',
    				closeClick : true,
     
    				openEffect : 'none',
     
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					overlay : {
    						css : {
    							'background' : 'rgba(238,238,238,0.85)'
    						}
    					}
    				}
    			});
     
    			// Remove padding, set opening and closing animations, close if clicked and disable overlay
    			$(".fancybox-effects-d").fancybox({
    				padding: 0,
     
    				openEffect : 'elastic',
    				openSpeed  : 150,
     
    				closeEffect : 'elastic',
    				closeSpeed  : 150,
     
    				closeClick : true,
     
    				helpers : {
    					overlay : null
    				}
    			});
     
    			/*
    			 *  Button helper. Disable animations, hide close button, change title type and content
    			 */
     
    			$('.fancybox-buttons').fancybox({
    				openEffect  : 'none',
    				closeEffect : 'none',
     
    				prevEffect : 'none',
    				nextEffect : 'none',
     
    				closeBtn  : false,
     
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					buttons	: {}
    				},
     
    				afterLoad : function() {
    					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    				}
    			});
     
     
    			/*
    			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
    			 */
     
    			$('.fancybox-thumbs').fancybox({
    				prevEffect : 'none',
    				nextEffect : 'none',
     
    				closeBtn  : false,
    				arrows    : false,
    				nextClick : true,
     
    				helpers : {
    					thumbs : {
    						width  : 50,
    						height : 50
    					}
    				}
    			});
     
    			/*
    			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
    			*/
    			$('.fancybox-media')
    				.attr('rel', 'media-gallery')
    				.fancybox({
    					openEffect : 'none',
    					closeEffect : 'none',
    					prevEffect : 'none',
    					nextEffect : 'none',
     
    					arrows : false,
    					helpers : {
    						media : {},
    						buttons : {}
    					}
    				});
     
    			/*
    			 *  Open manually
    			 */
     
    			$("#fancybox-manual-a").click(function() {
    				$.fancybox.open('1_b.jpg');
    			});
     
    			$("#fancybox-manual-b").click(function() {
    				$.fancybox.open({
    					href : 'iframe.html',
    					type : 'iframe',
    					padding : 5
    				});
    			});
     
    			$("#fancybox-manual-c").click(function() {
    				$.fancybox.open([
    					{
    						href : '1_b.jpg',
    						title : 'My title'
    					}, {
    						href : '2_b.jpg',
    						title : '2nd title'
    					}, {
    						href : '3_b.jpg'
    					}
    				], {
    					helpers : {
    						thumbs : {
    							width: 75,
    							height: 50
    						}
    					}
    				});
    			});
     
     
    		});
    	</script>
    Merci pour votre aide et encore bonne année !
    dh

  2. #2
    Membre éprouvé
    Homme Profil pro
    Lycéen
    Inscrit en
    Mars 2014
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Belgique

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mars 2014
    Messages : 48
    Par défaut
    Salut

    Je ne pense pas que fancybox permet de le faire directement, mais il suffirait de créer un diaporama comme si chaque image était affichée, mais cacher toutes les images sauf chaque première.
    Comme ceci:
    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
     
    <script>
    $("a.diapo1").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'titlePosition' : 'over',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
        }
    });
    </script>
    <div id='gallery1'>
            <a class="diapo1" href="diapo1_a.jpg" title="Ma photo 1"><img alt="" src="diapo1_a.jpg" /></a>
            <a class="diapo1" href="diapo1_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo1_b.jpg" /></a>
            <a class="diapo1" href="diapo1_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo1_c.jpg" /></a>
            <a class="diapo1" href="diapo1_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" /></a>
    </div>
    J'ai repris leur exemple pour le javascript.

    Il suffirait ensuite de copier coller ce code 4 fois, en changeant diapo1 par diapo2, 3 et 4.

    Bonne soirée

    NB:Il existe peut être des plugins de diaporama qui prévoient directement cette fonction.

  3. #3
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut
    Slt vandenn3
    Merci pour ta réponse. Pas mal du tout !!! Bon, en cliquant sur la vignette, j'ai bien l'image_a qui s'affiche façon lightbox sauf qu'il me manque les flèches (et pourtant la croix est bien là). Le code doit en "empêcher" l'affichage via un conflit quelconque, non ? Par conséquent je ne peux pas accéder à l'image_b (mais avec les flèches, je suis certain que ça fonctionne J'ai comme l'impression que cette discussion sera vite résolue
    Encore merci, bon après-midi et bravo pour ta rapidité,
    dh

  4. #4
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut

    Voici le fichier jquery.fancybox-buttons.js
    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
     /*!
     * Buttons helper for fancyBox
     * version: 1.0.5 (Mon, 15 Oct 2012)
     * @requires fancyBox v2.0 or later
     *
     * Usage:
     *     $(".fancybox").fancybox({
     *         helpers : {
     *             buttons: {
     *                 position : 'top'
     *             }
     *         }
     *     });
     *
     */
    (function ($) {
    	//Shortcut for fancyBox object
    	var F = $.fancybox;
     
    	//Add helper object
    	F.helpers.buttons = {
    		defaults : {
    			skipSingle : false, // disables if gallery contains single image
    			position   : 'top', // 'top' or 'bottom'
    			tpl        : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
    		},
     
    		list : null,
    		buttons: null,
     
    		beforeLoad: function (opts, obj) {
    			//Remove self if gallery do not have at least two items
     
    			if (opts.skipSingle && obj.group.length < 2) {
    				obj.helpers.buttons = false;
    				obj.closeBtn = true;
     
    				return;
    			}
     
    			//Increase top margin to give space for buttons
    			obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
    		},
     
    		onPlayStart: function () {
    			if (this.buttons) {
    				this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
    			}
    		},
     
    		onPlayEnd: function () {
    			if (this.buttons) {
    				this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
    			}
    		},
     
    		afterShow: function (opts, obj) {
    			var buttons = this.buttons;
     
    			if (!buttons) {
    				this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
     
    				buttons = {
    					prev   : this.list.find('.btnPrev').click( F.prev ),
    					next   : this.list.find('.btnNext').click( F.next ),
    					play   : this.list.find('.btnPlay').click( F.play ),
    					toggle : this.list.find('.btnToggle').click( F.toggle ),
    					close  : this.list.find('.btnClose').click( F.close )
    				}
    			}
     
    			//Prev
    			if (obj.index > 0 || obj.loop) {
    				buttons.prev.removeClass('btnDisabled');
    			} else {
    				buttons.prev.addClass('btnDisabled');
    			}
     
    			//Next / Play
    			if (obj.loop || obj.index < obj.group.length - 1) {
    				buttons.next.removeClass('btnDisabled');
    				buttons.play.removeClass('btnDisabled');
     
    			} else {
    				buttons.next.addClass('btnDisabled');
    				buttons.play.addClass('btnDisabled');
    			}
     
    			this.buttons = buttons;
     
    			this.onUpdate(opts, obj);
    		},
     
    		onUpdate: function (opts, obj) {
    			var toggle;
     
    			if (!this.buttons) {
    				return;
    			}
     
    			toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
     
    			//Size toggle button
    			if (obj.canShrink) {
    				toggle.addClass('btnToggleOn');
     
    			} else if (!obj.canExpand) {
    				toggle.addClass('btnDisabled');
    			}
    		},
     
    		beforeClose: function () {
    			if (this.list) {
    				this.list.remove();
    			}
     
    			this.list    = null;
    			this.buttons = null;
    		}
    	};
     
    }(jQuery));

  5. #5
    Membre éprouvé
    Homme Profil pro
    Lycéen
    Inscrit en
    Mars 2014
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Belgique

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mars 2014
    Messages : 48
    Par défaut
    Tu ne vois pas les flèches avec cet exemple? moi je les vois en approchant ma souris du bord droit/gauche des images (quand mon curseur est sur l'image)

  6. #6
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut
    Non, rien du tout :/ J'ai pas mal tripoté les CSS (fichier externe), je pensais que cela venait peut-être de là, mais non (j'ai remis les fichiers d'origine).
    J'ai donc mis au même niveau (dossier source) une ancienne page test fancybox, et là les flèches apparaissent. Le prob viendrait donc du code source de la page ?
    Je te joins le <head>
    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
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    	<!-- Add jQuery library -->
    	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
     
    	<!-- Add mousewheel plugin (this is optional) -->
    	<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
     
    	<!-- Add fancyBox main JS and CSS files -->
    	<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
    	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
     
    	<!-- Add Button helper (this is optional) -->
    	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
     
    	<!-- Add Thumbnail helper (this is optional) -->
    	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
     
    	<!-- Add Media helper (this is optional) -->
    	<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
     
    	<script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			 *  Simple image gallery. Uses default settings
    			 */
     
    			$('.fancybox').fancybox();
     
    			/*
    			 *  Different effects
    			 */
     
    			// Change title type, overlay closing speed
    			$(".fancybox-effects-a").fancybox({
    				helpers: {
    					title : {
    						type : 'outside'
    					},
    					overlay : {
    						speedOut : 0
    					}
    				}
    			});
     
    			// Disable opening and closing animations, change title type
    			$(".fancybox-effects-b").fancybox({
    				openEffect  : 'none',
    				closeEffect	: 'none',
     
    				helpers : {
    					title : {
    						type : 'over'
    					}
    				}
    			});
     
    			// Set custom style, close if clicked, change title type and overlay color
    			$(".fancybox-effects-c").fancybox({
    				wrapCSS    : 'fancybox-custom',
    				closeClick : true,
     
    				openEffect : 'none',
     
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					overlay : {
    						css : {
    							'background' : 'rgba(238,238,238,0.85)'
    						}
    					}
    				}
    			});
     
    			// Remove padding, set opening and closing animations, close if clicked and disable overlay
    			$(".fancybox-effects-d").fancybox({
    				padding: 0,
     
    				openEffect : 'elastic',
    				openSpeed  : 150,
     
    				closeEffect : 'elastic',
    				closeSpeed  : 150,
     
    				closeClick : true,
     
    				helpers : {
    					overlay : null
    				}
    			});
     
    			/*
    			 *  Button helper. Disable animations, hide close button, change title type and content
    			 */
     
    			$('.fancybox-buttons').fancybox({
    				openEffect  : 'none',
    				closeEffect : 'none',
     
    				prevEffect : 'none',
    				nextEffect : 'none',
     
    				closeBtn  : false,
     
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					buttons	: {}
    				},
     
    				afterLoad : function() {
    					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    				}
    			});
     
     
    			/*
    			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
    			 */
     
    			$('.fancybox-thumbs').fancybox({
    				prevEffect : 'none',
    				nextEffect : 'none',
     
    				closeBtn  : false,
    				arrows    : false,
    				nextClick : true,
     
    				helpers : {
    					thumbs : {
    						width  : 50,
    						height : 50
    					}
    				}
    			});
     
    			/*
    			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
    			*/
    			$('.fancybox-media')
    				.attr('rel', 'media-gallery')
    				.fancybox({
    					openEffect : 'none',
    					closeEffect : 'none',
    					prevEffect : 'none',
    					nextEffect : 'none',
     
    					arrows : false,
    					helpers : {
    						media : {},
    						buttons : {}
    					}
    				});
     
    			/*
    			 *  Open manually
    			 */
     
    			$("#fancybox-manual-a").click(function() {
    				$.fancybox.open('1_b.jpg');
    			});
     
    			$("#fancybox-manual-b").click(function() {
    				$.fancybox.open({
    					href : 'iframe.html',
    					type : 'iframe',
    					padding : 5
    				});
    			});
     
    			$("#fancybox-manual-c").click(function() {
    				$.fancybox.open([
    					{
    						href : '1_b.jpg',
    						title : 'My title'
    					}, {
    						href : '2_b.jpg',
    						title : '2nd title'
    					}, {
    						href : '3_b.jpg'
    					}
    				], {
    					helpers : {
    						thumbs : {
    							width: 75,
    							height: 50
    						}
    					}
    				});
    			});
     
     
    		});
    	</script>
        <script>
    $("a.diapo1").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'titlePosition' : 'over',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
        }
    });
    </script>
    	<style type="text/css">
    		.fancybox-custom .fancybox-skin {
    			box-shadow: 0 0 50px #222;
    		}
     
    		body {
    	max-width: 100%;
    	margin: 0 auto;
    	text-align: center;
    		}
        #diaporama {
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    }
        .img {
    	width: 23%;
    	margin-right: 1%;
    }
        .img_last {
    	margin-right: 0px;
    }
        </style>
    et le <body> (qui ne fait plus appel à certaines classes, donc épuré) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
     
    	<h3>Marcus Miller</h3>
    <div id='gallery1'>
          <p>
            <a class="diapo1" href="diapo_a.jpg" title="Ma photo 1"><img src="diapo_a.jpg" alt="" class="diapo1" /></a>
            <a class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" /></a>
            <a class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" /></a>
            <a class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo_d.jpg" /></a>
    </p></div>
    </body>
    J'ai vu en "travaillant" sur fancybox que quand il y a un diaporama avec une seule image (faut l' faire , les flèches n'apparaissent plus (c'est TOP !). J'ai donc comme l'impression que dans mon cas, les flèches ne s'affichent pas car l'appel à la photo diapo_b.jpg n'est pas "actif" Peut-être à cause d'une classe manquante, mais je ne pense pas. Je pense encore à une erreur dans mon code :/
    Merci pour ton aide et bon fin de journée,
    dh

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

Discussions similaires

  1. [Galerie] Ajuster une popup à la taille d'une image
    Par andre_21 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 19/09/2011, 07h00
  2. Réponses: 1
    Dernier message: 18/05/2009, 21h31
  3. Image caché par une vidéo
    Par Calvein dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 07/01/2009, 23h39
  4. [Zip] Zip d'images et galerie en php
    Par mereyj dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 06/04/2006, 21h26
  5. [Images] Finalisation Galerie d'image
    Par jexl dans le forum Bibliothèques et frameworks
    Réponses: 6
    Dernier message: 14/11/2005, 11h36

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