Discussion :

[dhillig]

Bonjour à tous,
J'ai un petit problème Mes pages sont du genre "galerie" dont voici un extrait html

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
       <div class="grid__item" data-size="1160x1280"> <figure> <a href="../img/original/Henri_Dufranne_deux.jpg" class="img-wrap"><img src="../img/thumbs/Henri_Dufranne_deux_thumb.jpg" alt="Henri Dufranne" /></a>
          <figcaption><strong>Henri Dufranne</strong></figcaption>
        </figure>
        <div class="description description--grid">
          <h1><strong>Henri Dufranne</strong></h1>
          <p>Gai Luron Poche 30p5</p>
          <div class="details">
            <ul>
              <li>
                <h2><i class="fa fa-expand"></i><span>16x17 cm</span> </h2>
              </li>
              <li>
                <h2><i class="fa fa-comment-o"></i><span>Petit Texte.</span></h2>
              </li>
            </ul>
          </div>
          <a href="../form.html" target="_blank" class="greenbutton">lien</a> </div>
      </div>

Les pages pouvant être longues, j'ai mis une flèche "retour en haut". Le 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
		$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.scroll-top-wrapper').addClass('show');
        } else {
            $('.scroll-top-wrapper').removeClass('show');
        }
    });
 
    $('.scroll-top-wrapper').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}

Cela va très bien lorsque la page est en mode galerie, mais lors du clic sur une image pour la rendre "fullscreen" (Fancybox), la flèche (bouton) est toujours présente.
Que l'overflow vertical soit présent n'a que peu d'importance (je dirais même que ça m'arrangerais de le garder), mais y'a t'il moyen de rendre la flèche "hidden" lors des clics ?
Merci pour votre aide et bonne journée,
dh

[Watilin]

Dans la doc de Fancybox tu as un choix d'évènements qui te permettent de placer des callbacks à des moments-clés. Ça te permettra de masquer ta flèche juste avant l'ouverture de la box (beforeShow) et de la rendre à nouveau visible une fois que la box est fermée (afterClose).

[dhillig]

Bonsoir Watilin,
Merci pour ta réponse. Je vais voir si j'arrive à trouver
Bon week-end et encore merci,
dh

[dhillig]

Il me semble que c'est ce code qui fait "office" de lightbox :

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
		(function() {
			var support = { transitions: Modernizr.csstransitions },
				// transition end event name
				transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				onEndTransition = function( el, callback ) {
					var onEndCallbackFn = function( ev ) {
						if( support.transitions ) {
							if( ev.target != this ) return;
							this.removeEventListener( transEndEventName, onEndCallbackFn );
						}
						if( callback && typeof callback === 'function' ) { callback.call(this); }
					};
					if( support.transitions ) {
						el.addEventListener( transEndEventName, onEndCallbackFn );
					}
					else {
						onEndCallbackFn();
					}
				};
 
			new GridFx(document.querySelector('.grid'), {
				imgPosition : {
					x : -0.5,
					y : 1,
				},
				onOpenItem : function(instance, item) {
					instance.items.forEach(function(el) {
						if(item != el) {
							var delay = Math.floor(Math.random() * 50);
							el.style.WebkitTransition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), -webkit-transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
							el.style.transition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
							el.style.WebkitTransform = 'scale3d(0.1,0.1,1)';
							el.style.transform = 'scale3d(0.1,0.1,1)';
							el.style.opacity = 0;
						}
					});
				},
				onCloseItem : function(instance, item) {
					instance.items.forEach(function(el) {
						if(item != el) {
							el.style.WebkitTransition = 'opacity .4s, -webkit-transform .4s';
							el.style.transition = 'opacity .4s, transform .4s';
							el.style.WebkitTransform = 'scale3d(1,1,1)';
							el.style.transform = 'scale3d(1,1,1)';
							el.style.opacity = 1;
 
							onEndTransition(el, function() {
								el.style.transition = 'none';
								el.style.WebkitTransform = 'none';
							});
						}
					});
				}
			});
		})();

Mais alors là... pour trouver ce dont tu me parles...
re_bon week-end,
dh

[Watilin]

Non non, tu n'as pas besoin de fouiller dans le code du framework ou de ses plugins. Tu as écrit que tu utilises Fancybox sur tes images. Montre-moi l'endroit de ton code où ça se passe.

[dhillig]

Non, je voulais dire genre lightbox/fancybox.
Une de mes deux galeries utilise ceci par exemple :

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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
if(typeof g_ugFunctions != "undefined")
	g_ugFunctions.registerTheme("tiles");
else 
	jQuery(document).ready(function(){g_ugFunctions.registerTheme("tiles")});
 
 
/**
 * Grid gallery theme
 */
function UGTheme_tiles(){
 
	var t = this;
	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
	var g_tiles = new UGTiles(), g_lightbox = new UGLightbox(), g_objPreloader, g_objTilesWrapper;
	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();
 
	var g_options = {
			theme_enable_preloader: true,		//enable preloader circle
			theme_preloading_height: 200,		//the height of the preloading div, it show before the gallery
			theme_preloader_vertpos: 100,		//the vertical position of the preloader
			theme_gallery_padding: 0,			//the horizontal padding of the gallery from the sides
			theme_appearance_order: "normal",	//normal, shuffle, keep - the appearance order of the tiles. applying only to columns type
			theme_auto_open:null				//auto open lightbox at start
	};
 
	var g_defaults = {
			gallery_width: "100%"
	};
 
	//temp variables
	var g_temp = {
			showPreloader: false
	};
 
 
	/**
	 * Init the theme
	 */
	function initTheme(gallery, customOptions){
 
		g_gallery = gallery;
 
		//set default options
		g_options = jQuery.extend(g_options, g_defaults);
 
		//set custom options
		g_options = jQuery.extend(g_options, customOptions);
 
		modifyOptions();
 
		//set gallery options
		g_gallery.setOptions(g_options);
 
		g_gallery.setFreestyleMode();
 
		g_objects = gallery.getObjects();
 
		//get some objects for local use
		g_objGallery = jQuery(gallery);		
		g_objWrapper = g_objects.g_objWrapper;
 
		//init objects
		g_tiles.init(gallery, g_options);
		g_lightbox.init(gallery, g_options);
 
		g_objTileDesign = g_tiles.getObjTileDesign();
 
	}
 
 
	/**
	 * modift options
	 */
	function modifyOptions(){
 
		if(g_options.theme_enable_preloader == true)
			g_temp.showPreloader = true;
 
		switch(g_options.theme_appearance_order){
			default:
			case "normal":
			break;
			case "shuffle":
				g_gallery.shuffleItems();
			break;
			case "keep":
				g_options.tiles_keep_order = true;
			break;
		}
 
	}
 
 
	/**
	 * set gallery html elements
	 */
	function setHtml(){
 
		//add html elements
		g_objWrapper.addClass("ug-theme-tiles");
 
		g_objWrapper.append("<div class='ug-tiles-wrapper' style='position:relative'></div>");
 
		//add preloader
		if(g_temp.showPreloader == true){
			g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>");
			g_objPreloader = g_objWrapper.children(".ug-tiles-preloader");
			g_objPreloader.fadeTo(0,0);
		}
 
		g_objTilesWrapper = g_objWrapper.children(".ug-tiles-wrapper");
 
		//set padding
		if(g_options.theme_gallery_padding)
			g_objWrapper.css({
				"padding-left":g_options.theme_gallery_padding+"px",
				"padding-right":g_options.theme_gallery_padding+"px"
			});
 
		g_tiles.setHtml(g_objTilesWrapper);
		g_lightbox.putHtml();
	}
 
	/**
	 * actually run the theme
	 */
	function actualRun(){
 
		//set preloader mode
		if(g_objPreloader){
			g_objPreloader.fadeTo(0,1);
			g_objWrapper.height(g_options.theme_preloading_height);
			g_functions.placeElement(g_objPreloader, "center", g_options.theme_preloader_vertpos);
		}
 
		initEvents();
 
		g_tiles.run();
		g_lightbox.run();
 
	}
 
 
	/**
	 * run the theme
	 */
	function runTheme(){
 
		setHtml();
 
		actualRun();
 
	}
 
 
 
	/**
	 * init size of the thumbs panel
	 */
	function initThumbsPanel(){
 
		//set size:
		var objGallerySize = g_gallery.getSize();
 
		if(g_temp.isVertical == false)			
			g_objPanel.setWidth(objGallerySize.width);
		else
			g_objPanel.setHeight(objGallerySize.height);
 
		g_objPanel.run();
	}
 
 
	/**
	 * on tile click - open lightbox
	 */
	function onTileClick(data, objTile){
 
		objTile = jQuery(objTile);		
 
		var objItem = g_objTileDesign.getItemByTile(objTile);
		var index = objItem.index;		
 
		g_lightbox.open(index);
	}
 
 
	/**
	 * before items request: hide items, show preloader
	 */
	function onBeforeReqestItems(){
 
		g_objTilesWrapper.hide();
 
		if(g_objPreloader)
			g_objPreloader.show();
 
		var preloaderSize = g_functions.getElementSize(g_objPreloader);
		var galleryHeight = preloaderSize.bottom + 30;
 
		g_objWrapper.height(galleryHeight);
	}
 
	/**
	 * open lightbox at start if needed
	 */
	function onLightboxInit(){
 
		if(g_options.theme_auto_open !== null){
			g_lightbox.open(g_options.theme_auto_open);
			g_options.theme_auto_open = null;
		}
 
	}
 
 
	/**
	 * init buttons functionality and events
	 */
	function initEvents(){
 
		//remove preloader on tiles first placed
		if(g_objPreloader){
			jQuery(g_tiles).on(g_tiles.events.TILES_FIRST_PLACED, function(){
				g_objWrapper.height("auto");
				g_objPreloader.hide();
			});			
		}
 
		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
 
		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
 
		jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit);
 
	}
 
 
	/**
	 * destroy the theme
	 */
	this.destroy = function(){
 
		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
		jQuery(g_tiles).off(g_tiles.events.TILES_FIRST_PLACED);
 
		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
 
		jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT);
 
		g_tiles.destroy();
		g_lightbox.destroy();
	}
 
 
	/**
	 * run the theme setting
	 */
	this.run = function(){
 
		runTheme();
	}
 
 
	/**
	 * init 
	 */
	this.init = function(gallery, customOptions){
 
		initTheme(gallery, customOptions);
 
	}
 
 
}

Pour la seconde galerie, excepté ce que je t'ai envoyé précédemment : ???
Merci pour ton aide et bonne soirée,
dh