comment faire lightbox2 sensible

J'ai regardé ici: http://drupal.org/node/1630630 mais c'est seulement pour les sites Drupal. Quelqu'un sait comment modifier la régulière lightbox2 bibliothèque de les adapter et de les afficher sur un petit écran de mobile?

par "responsive", je veux dire que l'image doit s'afficher en fonction de la taille de l'écran. Droit maintenant, il a toujours la même taille et de même sur les petits écrans des besoins de défilement.

OriginalL'auteur camcam | 2012-07-22

1

Vous devriez juste être capable de mettre en max-width:100% sur l'image (à l'aide de CSS). C'est tout ce qu'il faut pour faire une image réactive. Si lightbox2 ensembles de styles sur l'image, il suffit de regarder le sélecteur de la spécificité et de la remplacer

J'ai réussi à obtenir l'effet satisfaisant avec le code css suivant: .lb-dataContainer, .lb-outerContainer { max-width: 100%; height: auto !important; width: auto !important; }

OriginalL'auteur danwellman
3

Bien, c'est super en retard, mais je suis tombé sur ce vouloir de l'aide. Les deux extraits de code dans les réponses "sorte de" travail mais ils ont l'air TERRIBLE!

Cela fonctionne beaucoup mieux, l'OMI:
```
.lb-image, .lb-dataContainer {
 max-width: 100%;
 height: auto !important;
 width: 100%;
}

.lb-outerContainer {
 max-width: 100%;
 height: auto !important;
}
```
Le "morphing", d'une image à l'autre est perdu avec cet extrait. Lors de la modification de l'image, la hauteur va au minimum jusqu'à la prochaine pic est chargé.

OriginalL'auteur Mister Oh
1

J'ai utilisé:
.lb-image, .lb-dataContainer, .lb-outerContainer { max-width: 100%; height: auto !important; width: auto !important; }

Merci de ne pas juste de "fournir des solutions de code". Décrire pourquoi cela a fonctionné pour vous.

OriginalL'auteur NickW

merci pour les pointeurs...utilisé quelques suggestions précédentes comme un point de départ et un violon par la suite.

Je travaille sur un site avec une installation existante de LightBox2 v2.0, plutôt que d'une nouvelle installation (et d'avoir à re-coder les images, etc), j'ai juste décidé d'avoir un violon...

Mon CSS est ci-dessous. Il est maintenant totalement responsive.

Les principaux points sont en train de changer le width, max-width, height et max-height & !important. J'ai trouvé qu'une fois que j'avais obtenu la largeur de répondre à la fenêtre d'affichage de la #outerImagecontainer était en train de devenir très long, donc le max-hauteurs ou des hauteurs fixes. J'ai également limité la largeur de 768px, que la largeur du site et aussi les images aussi, mise à l'échelle d'eux fut évidemment la meilleure.

lightbox, #lightbox img, #outerImageContainer, #hovernav, #imageDataContainer et #superposition de tous les avoir eu un peu modifier.

    #lightbox{  position: absolute; max-height:700px; left: 0; width: 100%; z-index: 100; text-

align: center; line-height: 0;}
#lightbox img{ width:100%; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; max-width: 760px; width:80% !

important; max-height:50%; height: auto !important; margin: 0 auto;font-size:11px !important; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 25%; text-align: center; 

line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; max-height:50%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); 

/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/lightbox2/images/prevlabel.gif) 

left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/lightbox2/images/nextlabel.gif) 

right 15% no-repeat; }

#imageDataContainer{ font: 85% arial, sans-serif; background-color: #fff; margin: 0 auto; line-

height: 1.4em; overflow: auto; max-width: 760px; width: 80% !important; max-height:50px;}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }           
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: auto; background-

color: #000; }

OriginalL'auteur Mike

0

Pour moi, il a travaillé comme NickW dit (merci la façon dont vous m'a aidé à trouver cette solution), il avait juste besoin d'un peu de changement:
```
@media only screen and (max-width: 680px) {.lb-dataContainer{
max-width: 80%; 
height: auto !important; 
width: auto !important; }.lb-outerContainer { 
max-width: 80%; 
height: auto !important; 
width: auto !important;}}
```
La lightbox n'a pas de problème jusqu'à la notamment la taille de l'écran, j'ai donc utilisé les media queries pour la partie de l'image de départ est pas raccord de la petite taille de l'écran (dans mon cas c'était 680px). Et il fonctionne le mieux pour moi lorsque les récipients ne sont pas en prenant toutes gratuit la largeur de l'écran (il a juste l'air plus agréable pour moi) mais c'est juste un choix, il suffit donc de vérifier comment cela fonctionne pour vous.
Pour la .lb-image suffit d'utiliser le code qui est écrit dans le post ci-dessus.

OriginalL'auteur JaninaSt

J'ai essayé toutes les suggestions sur cette page, et n'en trouva aucun d'entre eux travaillaient. Donc, après quelques heures, j'ai écrit mon propre basée sur la capture d'une fenêtre de l'événement de redimensionnement.

Voici ma solution, il peut sembler comme beaucoup de travail, mais il met à l'échelle les images avec brio lorsque la fenêtre est redimensionnée (c'est en grande partie basé sur JavaScript):

Dans lightbox.js procédez de la manière suivante:

Créer deux variables globales:

var preloader_Height;
var preloader_Width;

Les remplir dans le preloader.onload de la fonction comme suit

 preloader_Height = preloader.height;
 preloader_Width = preloader.width;

Puis, en bas du script (juste avant l'instruction return):

//Hack is here, modifying scaling when window resize event handler is fired
$( window ).resize(function() {
//Grabbing the padding (if there is any)
containerTopPadding = parseInt($('.lb-container').css('padding-top'), 10);
containerRightPadding = parseInt($('.lb-container').css('padding-right'), 10);
containerBottomPadding = parseInt($('.lb-container').css('padding-bottom'), 10);
containerLeftPadding = parseInt($('.lb-container').css('padding-left'), 10);
//Calculating max image width and height to prevent the image going outside of screen
windowWidth    = window.innerWidth;
windowHeight   = window.innerHeight;
maxImageWidth  = windowWidth - containerLeftPadding - containerRightPadding - 20;
maxImageHeight = windowHeight - containerTopPadding - containerBottomPadding - 120;
//Checking for a fitting issue and also defining imageHeight and imageWidth
if ((preloader_Width > maxImageWidth) || (preloader_Height > maxImageHeight)) {
if ((preloader_Width / maxImageWidth) > (preloader_Height / maxImageHeight)) {
imageWidth  = maxImageWidth;
imageHeight = parseInt(preloader_Height / (preloader_Width / imageWidth), 10);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader_Width / (preloader_Height / imageHeight), 10);
}
}
//Forcing internal image to be 100% so it scales with its external container
$(".lb-image").css("width", "100%");
$(".lb-image").css("height", "100%"); 
//Forcing the external container to match the new required image width and height
$(".lb-outerContainer").css("width", imageWidth);
$(".lb-outerContainer").css("height", imageHeight); 
//Scaling the information at the bottom showing image number and little cross
$(".lb-dataContainer").css("width", imageWidth);
//Defining width for the navigation buttons
$(".lb-nav").css("width", imageWidth);
//Centering vertically
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top  = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);
});

En outre, dans lightbox.css ajouter:

left:50%;
transform: translateX(-50%);

.lb-nav.

Et enfin, ajouter

$(".lb-nav").css("width", imageWidth);  //Setting image width for the lb-nav
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top  = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);

à la sizeContainer fonction dans lightbox.js.

Maintenant, vous devriez être en mesure à l'échelle de votre fenêtre à volonté, en temps réel, et vos images à l'échelle en conséquence.

OriginalL'auteur Single Entity

Vous devez vous connecter pour publier un commentaire.