Intégrer Flickr avec Codrops FullScreen Gallery Problèmes

Je suis actuellement en train de créer une galerie Flickr avec l'utilisation de la galerie plein écran Codrops. J'ai réussi à importer les images flickr à partir d'un compte flickr et j'ai les images en plein écran qui fonctionnent avec des images non-flickr, mais en disant à flickr de travailler avec la galerie Codrops, ça semble s'arrêter de fonctionner.Intégrer Flickr avec Codrops FullScreen Gallery Problèmes

URL du site: http://www.media21a.co.uk/development/fullthrottle/flickr/ Ceci est le document Flickr: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/flickrImport.js Ceci est le document de la galerie: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/gallery.js

Je sais comment le faire fonctionner avec fancybox (lightbox) mais je ne suis pas sûr de savoir comment l'obtenir Travailler avec la galerie de codrops.

function attachFancyBox() 
{ 
    $(".fancyBox").fancybox(); 
} 

    /* BEGIN OPTIONAL FANCYBOX PARAMS */ 
    "rel":"casabelmonte",   // Rel tag to enable forward/back buttons on fancybox 
    "imageLink":"preview",   // Tells the script to grab the image url for fancybox to show 
    "className":"fancyBox",  // Class for attaching fancybox 
    "callback":attachFancyBox // Once the images show attach the fancybox script 
    /* END */

Si besoin est ici mon script global:

$(window).load(function() { 


    $(".dropgallery a, #fp_thumbtoggle").removeAttr("title"); 

    $('#fp_thumbtoggle, .dropgallery img').click(function() { 
     $('#fp_thumbtoggle').toggleClass("active"); 

     if ($('#fp_thumbtoggle').hasClass('active')){ 
      $('#fp_thumbtoggle').animate({top:'65px'}); 
     }else{ 
      $('#fp_thumbtoggle').animate({top:'185px'}); 
     } 
     $('.dropgallery').slideToggle('500'); 

    }); 

    });

J'ai réussi à Youtube & vidéos Vimeo importés et il fonctionne très bien, si vous pouviez me aider à ce que je vais vous ajoutez votre lien dans le codage sur le site Web et j'ajouterai quelques sorties de cri sur facebook & twitter:).

Source

2011-09-01 Delete

Alors qu'est-ce qui ne fonctionne pas exactement? En cliquant sur les vignettes à http://www.media21a.co.uk/development/fullthrottle/flickr/ devrait charger et montrer la version plus grande? – WTK

Oui, je veux que ça fonctionne comme la page d'accueil et la page Showcase, Avez-vous beaucoup regardé ce @WTK? – Delete

Je suis en train de regarder - j'ai corrigé une chose mais les images chargées sont toujours de petite taille au lieu d'une grande. – WTK

Vous essayez de lier le gestionnaire de clic (pour les pouces) pour les éléments qui n'existent pas encore, car ils sont chargés dynamiquement. Pour le faire fonctionner, remplacer la ligne (en gallery.js):

$thumbScroller.find('.content').bind('click', function(e){

à:

$thumbScroller.find('.content').live('click', function(e){

Cela rendra le travail en cliquant sur la vignette. Après cela, dans flickrImport.js changez l'URL qui est insérée dans l'attribut alt de l'image de _m à _b size, de sorte qu'après avoir cliqué, la grande version de l'image soit chargée, pas la taille _m à nouveau. Exemple:

alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_m.jpg"

changement:

alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg"

EDIT: J'ai oublié de mentionner - il y avait deux fonctions manquantes (showNav() et hideThumbs()). Ils sont appelés de l'intérieur de gallery.js.

Source

2011-09-02 08:36:00 WTK

Merci :) Cela fonctionne un régal. Comme je l'ai dit je vais faire apparaître votre lien dans le site et vous donner un coup de main sur facebook. envoyez-moi un message que vous voulez crier et je vais le faire apparaître en ligne:) – Delete

Intégrer Flickr avec Codrops FullScreen Gallery Problèmes

Répondre

Questions connexes