Problem z LightBox'em

pytanie zadane 4 grudnia 2015 w JavaScript przez Paweł123 Nałogowiec (33,500 p.)
edycja 10 grudnia 2015 przez Paweł123

Cześć, mam problem z galerią zdjęć. Kiedy klikam na zdjęcie to obraz pojawia się na całej stronie, chociaż nie powinnien. Chodzi przede wszystkim o wysokość tego obrazu (jest zbyt wysoki)
Co mogę zrobić, aby wyświetlał się dobrze w każdym oknie przeglądarki.

Kod html

<! DOCTYPE html> 
<html>
<head>

    <meta charset="utf-8"/>
    <title>Galeria</title>
    <meta http-equiv="X-UA-Compatible" contet="IE=edge,chrom=1"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
	<link rel="stylesheet" href="dist/css/lightbox.css"/>
    
    
</head>

<body>

<script src="dist/js/lightbox-plus-jquery.min.js"></script>
    
<div id="pudlo_glowne">
    
    <div id="logo"><a href="akademia-kot-aktualnosci"><img src="logo_1.png"/></a></div>
    <div id="menu">
        
        <li><a href="#">Aktualności</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="#">-plany"> Nasze plany</a></li>
        <li><a href="#">Dokumenty</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Kontakt</a></li>
     </div>

	 <a  href="DSC_0037.JPG" data-lightbox="example-set" data-title="Zdjęcie "><img src="DSC_0037.JPG" width="300"/></a>
	
    
      
</div>    
</body>

Kod CSS

body
{
    background-image: url(congruent_pentagon.png);
   font-family: 'Ubuntu', sans-serif;
    margin: 0;
    margin-top: 20px;

    
}
#pudlo_glowne
{
    width: 1200px;   
    height: 2000px;
    border: 4px black solid;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    margin-left: auto;
    margin-right: auto;
    background-color: beige;
   
 
   
}
#logo
{
    background-color: rgb(255, 212, 0);
    text-align: center;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 196px;
    border-top-right-radius: 196px;
   
}
#menu
{
    width: 1200px;
    height: auto;
    text-align: center;
    background-color: chartreuse;
    border-bottom: 2px black solid;
    border-top: 2px black solid;
    
}
li
{
    display: inline-block;
    font-size: 40px;
    padding: 10px;
}
li >a 
{
    text-decoration: none;
    color: black;
   
}
li >a:hover 
{
    
    color:whitesmoke;  
   transition: all 1s;
}
li:hover
{
   background-color: limegreen;
   transition: all 2s;
}

1 odpowiedź

odpowiedź 4 grudnia 2015 przez Piter Użytkownik (770 p.)

Wkleiłeś 2 razy kod HTML ;)

komentarz 4 grudnia 2015 przez Paweł123 Nałogowiec (33,500 p.)

Ok dzięki :D Już poprawiłem.

komentarz 4 grudnia 2015 przez Piter Użytkownik (770 p.)
edycja 4 grudnia 2015 przez Piter

Na pewno różnicę może zrobić sam rozmiar zdjęcia (jeśli będzie mniejsze wyświetli się prawidłowo).

Jeśli chciałbyś ustawić jednakowy rozmiar, czy maksymalny rozmiar dla wyświetlanych zdjęć mógłbyś dodać klasę do elementu <img>.

Nie jestem pewny, ale domyślna szerokość każdego zdjęcia w lightbox' ie jest ustawiona na automatyczną, dlatego zawsze będzie taka jak własnie rozmiar zdjęcia, ale tego nie jeste pewny, więc dobrze gdyby ktoś inny się wypowiedział.

//Edit

W pliku lightbox.css musiałbyś edytować wysokość i szerokość elementu

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

Choć wtedy zdjęcia mogą wyglądać źle, dlatego lepiej będzie zmienić ich rozmiar za pomocą jakiegoś programu, chyba że ma ktoś lepszy pomysł.