Discussion :

[moslem7]

Bonsoir à tous,
j'ai un problème avec le plugin de flipping gallery,quand je fais une seule galerie tous va bien mais mon problème que je veux faire deux galeries dans la même page seule la deuxième est fonctionnelle , merci de m'aider
plugin

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
/* ===========================================================
 * jquery-flipping_gallery.js v1.1
 * ===========================================================
 * Copyright 2013 Pete Rojwongsuriya.
 * http://www.thepetedesign.com
 *
 * Create a simple but beautiful
 * 3D flipping gallery with on JS call
 *
 * https://github.com/peachananr/flipping_gallery
 *
 * ========================================================== */
 
!function($){
 
  var defaults = {
    direction: "forward",
    flipDirection: "bottom",
    selector: "> a",
    spacing: 10,
    showMaximum: 15,
    enableScroll: true,
    autoplay: false
	};
 
 
 
  $.fn.flipping_gallery = function(options){
    var settings = $.extend({}, defaults, options),
        el = $(this),
        total = el.find(settings.selector).length,
        space = 0,
        scale = 0.5 / total, 
        opacity = 1 / total,
        lastAnimation = 0,
        quietPeriod = 500;  
 
    if (total > settings.showMaximum) opacity = 1 / settings.showMaximum
    el.addClass("fg-body")
 
 
    $.fn.realignCards = function() {
      var el = $(this);
      $.each(el.find(settings.selector), function(i) {
        if (i == 0) {
          $(this).addClass("active " + settings.flipDirection)
          el.find(".fg-caption").remove()
          if($(this).data("caption")) {
            el.append("<div class='fg-caption' style='opacity: 0;'>" + $(this).attr("data-caption") + "</div>")
            el.find(".fg-caption").css({
              "opacity": "1"
            });
          }
        }
 
 
        space = space + settings.spacing
        new_scale = 1 - (scale * i)
        new_opacity = 1 - (opacity * i)
        if (i >= settings.showMaximum) {
          $(this).css("opacity", 0)
        } else {
           $(this).css("opacity", 1)
        }
        $(this).addClass("animate fg-card").css({
          "z-index": 5 - i,
          "margin-top": "-" + space + "px",
          "-webkit-transform": "scale(" + new_scale + ")",
          "-moz-transform": "scale(" + new_scale + ")",
          "-o-transform": "scale(" + new_scale + ")",
          "transform": "scale(" + new_scale + ")",
          "opacity": new_opacity
        });
        $(this).click(function() {
          return false;
        });
      });
      el.find("> .fg-card.active").click(function() {
        if (settings.direction == "forward") {
          el.flipForward();
        } else {
          el.flipBackward();
        }
 
        return false;
      })
    }
 
    function init_scroll(event, delta) {
        deltaOfInterest = delta;
        var timeNow = new Date().getTime();
        // Cancel scroll if currently animating or within quiet period
        if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
            event.preventDefault();
            return;
        }
 
        if (deltaOfInterest < 0) {
          el.flipForward()
        } else {
          el.flipBackward()
        }
        lastAnimation = timeNow;
    }
 
    $.fn.flipForward = function() {
      if (!el.hasClass("animating")) {
        el.addClass("animating")
        el.find(".fg-caption").remove();
        var card = el.find("> .fg-card").first();
        card.addClass("fg-flipping").css("opacity", "0");
        card.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
          var save_card = card.removeClass("animate active fg-flipping [class^='fg-count-'] " + settings.flipDirection).clone();
          card.remove();
          el.append(save_card.hide());
 
          el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
            space = 0;
            el.realignCards()
          });
 
          el.find("> .fg-card").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e) {
            el.find("> .fg-card").fadeIn()
            el.removeClass("animating")
          });
        });
      }
    }
 
    $.fn.flipBackward = function() {
      if (!el.hasClass("animating")) {
        el.addClass("animating")
        var prev_card = el.find("> .fg-card").last();
        var new_prev_card = prev_card.clone()
        prev_card.remove()
        el.find(".active").removeClass("active "  + settings.flipDirection)
        el.prepend(new_prev_card.attr("style", "").css({
          "opacity": "0",
          "z-index": "99"
        }).hide().addClass("active fg-flipping "  + settings.flipDirection))
        el.find("> .fg-card.active").addClass("animate").show().removeClass("fg-flipping").css("opacity", "1")
        space = 0;
        el.realignCards();
        el.find("> .fg-card").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e) {
 
          el.removeClass("animating")
        });
      }
    }
 
    el.realignCards();
 
    if (settings.enableScroll == true) {
      $(el).bind('mousewheel DOMMouseScroll', function(event) {
        event.preventDefault();
        var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
        init_scroll(event, delta);
      });
    }
 
    if(settings.autoplay != 0 && settings.autoplay != false) {
      setInterval(function() {
 
        if($(el.selector + ":hover").length < 1) el.flipForward()
      }, settings.autoplay);
    }
 
  }
}(window.jQuery);

premiere appel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(".gallery").flipping_gallery({
    direction: "forward", // This is will set the flipping direction when the gallery is clicked. Options available are "forward", or "backward". The default value is forward.
    selector: "> a", // This will let you change the default selector which by default, will look for <a> tag and generate the gallery from it. This option accepts normal CSS selectors.
    spacing: 10, // You can set the spacing between each photo in the gallery here. The number represents the pixels between each photos. The default value is 10.
    showMaximum: 15, // This will let you limit the number of photos that will be in the viewport. In case you have a gazillion photos, this is perfect to hide all those photos and limit only a few in the viewport.
    enableScroll: true, // Set this to false if you don't want the plugin to override your scrolling behavior. The default value is true.
    flipDirection: "bottom", // You can now set which direction the picture will flip to. Available options are "left", "right", "top", and "bottom". The default value is bottom.
    autoplay: false // You can set the gallery to autoplay by defining the interval here. This option accepts value in milliseconds. The default value is false.
  });

deuxieme appel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(".gallery1").flipping_gallery({
    direction: "forward", // This is will set the flipping direction when the gallery is clicked. Options available are "forward", or "backward". The default value is forward.
    selector: "> a", // This will let you change the default selector which by default, will look for <a> tag and generate the gallery from it. This option accepts normal CSS selectors.
    spacing: 10, // You can set the spacing between each photo in the gallery here. The number represents the pixels between each photos. The default value is 10.
    showMaximum: 15, // This will let you limit the number of photos that will be in the viewport. In case you have a gazillion photos, this is perfect to hide all those photos and limit only a few in the viewport.
    enableScroll: true, // Set this to false if you don't want the plugin to override your scrolling behavior. The default value is true.
    flipDirection: "bottom", // You can now set which direction the picture will flip to. Available options are "left", "right", "top", and "bottom". The default value is bottom.
    autoplay: false // You can set the gallery to autoplay by defining the interval here. This option accepts value in milliseconds. The default value is false.
  });

et le html

Code html :

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
<body>
  <div class="gallery">
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
  </div>
  <div class="gallery1">
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
  </div>
</body>

[SpaceFrog]

Flipping Gallery let you create a simple but beautiful 3D flipping gallery using minimal HTML markups and one JS call.

D'après ce que je lis de la présentation du plugin, il n'est pas prévu pour créer plusieurs galeries sur la page ...

Paue etre qu'en utilisant noConflict() pour chaque instance tu arriverais à en créer plusieurs

sinon j'aurai plutôt regardé du coté du plugin JQuery Cycle ...