Utiliser fancybox pour voir l'image en taille réelle

Question

J'essaie de développer du code où une jquery prend des images et les redimensionne pour s'adapter à la div parente, avec une option pour cliquer sur l'image pour la voir en taille réelle avec fancybox. J'essaye de faire toutes les images avec la classe "expand", et ne prévois pas avoir plus que sur l'image avec cette classe par page.

Voici ce que j'ai trouvé jusqu'à présent. L'image se redimensionne très bien, et je peux cliquer sur l'image pour faire apparaître la fancybox, mais c'est à la taille redimensionnée, pas à l'original. J'ai de la largeur et de la hauteur en tant que vars pour les dimensions originales, mais les spécifier ne fonctionne pas, depuis son inline. Donc, j'ai besoin d'utiliser une iframe que j'ai trouvée, et j'ai essayé d'envelopper un lien autour d'elle et de spécifier le lien comme une iframe avec les dimensions spécifiées, en saisissant .attr ("src") pour le lien. Mais peu importe ce que je fais, il va à la page 404 dans le fancybox. Voici ce que j'ai, je ne sais pas comment procéder, ou est-ce que je pense à ce problème de la mauvaise façon?

if($('img.expand').length){ 
     var parentClass = $('img.expand').parent().attr("class");   
     var fwidth = $('img.expand').attr("width"); 
     var fheight = $('img.expand').attr("height");     
     if($('img.expand').parents().is('.grid_10')){ 
       $('img.expand').each(function() { 
       var maxwidth = 590; 
       var obj = $('img.expand'); 
       var width = obj.width(); 
       var height = obj.height(); 
       if (width > maxwidth) { 
        //Set variables for manipulation 
        var ratio = (height/width); 
        var new_width = maxwidth; 
        var new_height = (new_width * ratio); 

        //Shrink the image and add link to full-sized image 
        obj.height(new_height).width(new_width); 

       } 
      }); 
     } 
     $('img.expand').fancybox({ 
      'transitionIn' : 'fade', 
      'transitionOut' : 'fade', 
      'speedIn'  : 600, 
      'speedOut'  : 200, 
      'overlayShow' : false, 
      'titlePosition' : 'inside' 
     }); 
} 

Answer 1

Assurez-vous d'inclure jquery.fancybox-buttons.css et jquery.fancybox-buttons.js dans votre projet. Ensuite, vous pouvez faire quelque chose comme ça pour ajouter les boutons:

$(".fancybox").fancybox({ 
    helpers: { 
     buttons: {} 
    } 
}); 

Cela ajoutera la barre d'outils bouton en haut de la fenêtre. Si vous appuyez sur le bouton de redimensionnement, la fenêtre s'ouvrira pour montrer à l'utilisateur l'image complète. Ainsi, si vous téléchargez une image, générez une vignette et utilisez la fonction fancybox sur la vignette, l'utilisateur peut cliquer sur la vignette pour voir la fenêtre, puis cliquer sur le bouton situé en haut de la fenêtre pour développer la fenêtre d'affichage. image complète Certains documents sont disponibles ici:

http://fancyapps.com/fancybox/#instructions

Regardez la section sur les fonctionnalités étendues.

Answer 2

Une variante plus comme exemple (fancybox 2.1.5):

$('.fancybox').fancybox({ 
    afterShow: function() { 
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() { 
     $.fancybox.toggle(); 
     $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r'); 
    }); 
    } 
}); 

Et css:

.fancybox-fullsize, .fancybox-fullsize-r { 
    position: absolute; 
    width: 36px; 
    height: 36px; 
    top: -18px; 
    left: -18px; 
    z-index: 99999; 
    cursor: pointer; 
} 

.fancybox-fullsize { 
    background-image: url(img/fancybox_fullsize.png); 
} 

.fancybox-fullsize-r { 
    background-image: url(img/fancybox_fullsize-r.png); 
} 

Answer 3

tout d'abord télécharger toutes les images de même taille que vous définissez dans preferences->images->thickbox_default

, puis téléchargez les fichiers .jpg.

changement de la valeur ci-dessous /js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:!0 à ->fitToView:!1

Essayez maintenant.