Forums Développement Multimédia

Aller au contenu

Fonction jQuery

CODE Ajax JQuery EaseJs

7 réponses à ce sujet

#1 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 04 October 2012 - 21:26 PM

Bonjour les gens :mrgreen:

Je suis désolé si je ne suis pas dans la bonne section mais je n'ai pas trouvé de forum spécifique à jQuery seulement.

Sans plus attendre voici mon problème:

J'ai téléchargé une magnifique galerie à cette adresse http://buildinternet...flickr-support/

Sa fonctionne tout bien et tout sans aucune problème... sauf que le créateur de ce plugin jQuery n'à pas prévu de pouvoir ajouter des images à la volée mais uniquement de les ajouters à la mano une par une dans le code jQuery... lourd... très lourd.

Donc voilà je voulais savoir s'il était possible de transformer ceci:


$.supersized({
       
           // Functionality
           slideshow                       :   1,   // Slideshow on/off
           autoplay     : 1,   // Slideshow starts playing automatically
           start_slide                   :   1,   // Start slide (0 is random)
           stop_loop    : 0,   // Pauses slideshow on last slide
           random        :  0,   // Randomize slide order (Ignores start slide)
           slide_interval                 :   3500,  // Length between transitions
           transition                     :   6,        // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
           transition_speed  : 1000,  // Speed of transition
           new_window   : 1,   // Image links open in new window/tab
           pause_hover                   :   0,   // Pause slideshow on hover
           keyboard_nav                 :   1,   // Keyboard navigation on/off
           performance  : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
           image_protect   : 1,   // Disables image dragging and right click with Javascript
                                 
           // Size & Position          
           min_width              :   0,   // Min width allowed (in pixels)
           min_height             :   0,   // Min height allowed (in pixels)
           vertical_center               :   1,   // Vertically center background
           horizontal_center       :   1,   // Horizontally center background
           fit_always   : 0,   // Image will never exceed browser width or height (Ignores min. dimensions)
           fit_portrait           :   1,   // Portrait images will not exceed browser height
           fit_landscape   :   1,   // Landscape images will not exceed browser width
                                 
           // Components         
           slide_links  : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
           thumb_links  : 1,   // Individual thumb links for each slide
           thumbnail_navigation :   0,   // Thumbnail navigation
         
         
           slides         :   [   // Slideshow Images
         
           {
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
           }
                          ],
                       
           // Theme Options    
           progress_bar   : 1,   // Timer for each slide         
           mouse_scrub  : 0
         
          });
         });

 

Qui est le code d'origine, en quelque chose du genre:


slides    :   [   // Slideshow Images
           for (var i in ar_images)
           {
         
                                {image :i, title : 'Bla bla', thumb : i},
                               
           }
                          ],
 

Evidemment dans l'état actuel cela ne peut fonctionner mais je voulais savoir s'il y à une astuce :roll: ...

#2 Monz

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3541 messages

Posté 05 October 2012 - 05:50 AM

Bonjour,

Qu'appelles-tu ajouter à la volée ? Comment remplirais-tu ton tableau ar_images ? Les infos seraient contenues où au départ dans une BDD ? Ou tu cherches un script serveur qui parcourt un dossier et te renvoie toutes les images du dossier ? Tu fais ton appel comment, en ajax ?

#3 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 05 October 2012 - 08:43 AM

Salut et merci pour ta réponse Monz,

Donc effectivement je n'avais pas donnée cette information dans un premier temps car je pensai que l'info était secondaire mais comme tu me le demandes.

Mon tableau est déjà remplit grâce à php qui récupère toutes les images contenu dans un dossier puis ce tableau est envoyé à JS grâce à JSON, celà fonctionne parfaitement. Maintenant j'aimerai que cette galerie récupère toutes les images contenu dans le tableau pour les afficher. En fait mon problème pour être plus précis c'est de connecté le plugin de la galerie à une boucle For ou je ne sais quoi pour pouvoir y injecter toutes les photos contenu dans l'array. Et je ne suis pas sûr que dans une fonction jQuery celà soit possible... du moins dans l'état.

#4 Monz

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3541 messages

Posté 05 October 2012 - 09:27 AM

Quand tu appelles ton plugin, ça se passe comment ? Tu n'as pas moyen de lui passer le tableau ?

#5 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 05 October 2012 - 09:31 AM

Appel du script de cette manière

<script src='js/supersized.3.2.7.min.js' type='text/javascript'></script>
<script src='js/supersized.shutter.min.js' type='text/javascript'></script>
 
Suivit du gros bout de code dans le 1er post que j'ai mis.

Puis


<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>

<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="thumb-tray" class="load-item">
  <div id="thumb-back"></div>
  <div id="thumb-forward"></div>
</div>

<!--Time Bar-->
<div id="progress-back" class="load-item">
  <div id="progress-bar"></div>
</div>

<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
  <div id="controls">
 
   <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
 
   <!--Slide counter-->
   <div id="slidecounter">
    <span class="slidenumber"></span> / <span class="totalslides"></span>
   </div>
 
   <!--Slide captions displayed here-->
   <div id="slidecaption"></div>
 
   <!--Thumb Tray button-->
   <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
 
   <!--Navigation-->
   <ul id="slide-list"></ul>
 
  </div>
</div>
 


C'est quand même dommage d'avoir une belle galerie comme ça sans pouvoir ajouter autant de photos que l'on voudrait à la volée... :cry:

#6 Monz

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3541 messages

Posté 05 October 2012 - 11:02 AM

Ce lien devrait t'intéresser...

#7 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 05 October 2012 - 14:35 PM

Ouuuu merci! Je finis de manger et je regarde ça!

#8 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 05 October 2012 - 19:20 PM

Rien à redire... c'est nickel de chez chrome.

Merci beaucoup!



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)