Comment écrire JSON var data Objet pour JQuery Galleria

J'ai un problème avec JQuery Galleria et la personne de support a dit que c'est un bug et pour le réparer, je dois mettre mes images dans un objet de données JSON var dans mon Javascript.Comment écrire JSON var data Objet pour JQuery Galleria

Malheureusement pour moi, je n'ai aucune expérience en la matière et leurs informations ne sont pas très claires. Sur leur soutien de site Web, ils montrent le code suivant comme exemple:

var data = [ 
{ 
image: 'img1.jpg' thumb: 'thumb1.jpg' title: 'my first image', description: 'Lorem  ipsum caption' link: 'http://domain.com' 
}, { 

image: 'img2.jpg' thumb: 'thumb2.jpg' title: 'my second image', description: 'Another caption' link: '/path/to/destination.html' 
} 

]; 

$('#container').galleria({ 
data_source: data 
});

Actuellement, je suis en train de créer simplement les grands graphiques, puis appeler à eux dans un Javascript qui se présente comme suit:

$(document).ready(function() { 
    // Load theme 
    Galleria.loadTheme('themes/classic/galleria.classic.js'); 

    // run galleria and add some options 
    $('#galleria').galleria({ 
     debug: true, 
     image_crop: true, 
     height: 397, 
     max_scale_ratio: 1, //Ensures the picture crop doesn't zoom the picture 
     autoplay: 8000, //Sets an autoplay interval of 8 seconds (8000) 
     transition: 'fade', 
     data_config: function(img) { 
      return { 
       description: $(img).next('p').html() 
      }; 
     } 
    });

Quelqu'un peut-il aidez-moi à comprendre ce que je dois faire ensuite pour mettre en place et tester pour voir si cela fonctionne? Compte tenu de mon manque d'expérience de codage JSON, j'ai probablement besoin d'un exemple qui me guide à travers ce qu'il faut faire. Merci.

Source

2010-06-23 aeisenbe

J'essayais de faire la même chose. Voici ce que j'ai trouvé:

<script> 
var data = [ 
    { image: 'images/projects/graphic/agape/agape_shirt.png' }, 
    { image: 'images/projects/graphic/agape/agape_guitar.png' } 
]; 

$('.graphic_project').galleria({ 
    transition: 'fade', 
    data_source: data 
    }); 
</script>

Espérons que ça aide!

Source

2010-06-23 17:10:27 katie

Oui, c'est exactement ce que j'ai essayé et a parfaitement fonctionné. Je vous remercie. – aeisenbe

La documentation Galleria ne fait pas rapport pour mettre la fonction Galleria.loadTheme et la fonction $('#galleria').galleria dans le script $(document).ready(function() {...} mais les laisser dans un script tag après la balise <div id="galleria">

Source

2011-03-15 12:10:45 superperu

J'utilise la version 1.2.6 alors peut-être la précédente les exemples utilisent une version antérieure. Quoi qu'il en soit, les exemples de code précédents utilisent le paramètre data_source pour passer le tableau json. Pour v1.2.6 de galleria, le paramètre/propriété est dataSource (c'est-à-dire sans trait de soulignement).

également mon code ici (avec HTML sans importance et le contenu de la page découpée):

<HTML> 
<HEAD> 
...blahblahblah.... 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
    <script src="/Scripts/galleria/galleria-1.2.6.min.js"></script> 

</HEAD> 
<BODY> 
...blahblahblah... 
    <div id="photoGallery1"> 
    <!-- photoGallery1 is the id for the container that galleria will "pour" 
      the image gallery into. This is due to the element being referenced 
       in the galleria instantiation below. 
        i.e. **$('#photoGallery1').galleria**... --> 
    </div> 

...blahblahblah... 

    <Script> 
     $(document).ready(function() { 
      // Load theme 
      Galleria.loadTheme('/Scripts/galleria/themes/classic/galleria.classic.min.js'); 

      var gallery1Data = [ 
       { 
       thumb: '/Images/Gallery1/Thumb01.jpg', 
       image: '/Images/Gallery1/SunsetSmall.jpg', 
        big: '/Images/Gallery1/SunsetSmall.jpg', 
       title: 'Sunset Small', 
       description: 'Yet another lovely Oaxaca sunset on a day of MTBing', 
       link: 'http://www.OaxacaMTB.org/Images/SunsetSmall.jpg', 
       layer: '<div><h2>This image is gr8</h2><p>And this text will be on top of the image</p>' 
      }, 
      { 
       thumb: '/Images/Gallery1/Thumb02.jpg', 
       image: '/Images/Gallery1/TrailBiker-Small.jpg', 
       big: '/Images/Gallery1/TrailBiker-Small.jpg', 
       title: 'Trail Biker Small', 
       description: 'Looks like a biker out on a day of MTBing', 
       link: 'http://www.OaxacaMTB.org/Images/Gallery1/TrailBiker-Small.jpg', 
       layer: '<div><h2>This image is also gr8</h2><p>Good luck with Galleria!</p>' 
      } 
      ]; 

     $('#photoGallery1').galleria({ 
      dataSource: gallery1Data, 
      transition: 'slide', 
      transitionSpeed: 750, 
      autoplay: 2500, 
      imageCrop: true, 
      maxScaleRatio: 1, 
      overlayBackground: '#39561D', 
      height: 500, 
      width: 500 
     }); 


     }) 
    </script> 

...blahblahblah... 
</BODY> 
</HTML>

Points clés:
1) Assurez-vous que votre section HEAD comprend le script appelle à la bibliothèque de code jQuery plus la bibliothèque de code de galleria.

2) assurez-vous que l'appel Galleria.loadTheme se trouve dans votre page.

3) assurez-vous que votre fournir un récipient qui peut être identifié avec un sélecteur dans la galleria ({galleria appel instatiation (par exemple, est mon conteneur pour mon appel instanciation de $ (« # de photoGallery1 »). ..

4) remplir le tableau JSON avant la galleria instanciation

Il est un widget galerie très astucieux. Remuer un peu « amour » au créateur!

Source

2012-02-24 05:34:17

Comment écrire JSON var data Objet pour JQuery Galleria

Répondre

Questions connexes