圖片全屏的jQuery和CSS

Question

我試圖找出如何CSS3和jQuery的圖像畫廊一起工作，我被困在這種情況下：

我有一個頁面是這樣的：http://www.paolobergomi.it/sitob/gallery2.html
我第一部分的權利，當我不得不加載大圖像，並從這個代碼切換到另一個。

我有縮略圖向左和主圖像，查看到這樣的權利：

<div id="thumbsBox"> 
    <img id="one" src="tn/image-01.jpg" alt="first" class="blurredThumb"/> 
    <img id="two" src="tn/image-02.jpg" alt="second" /> 
    <img id="three" src="tn/image-03.jpg" alt="third" /> 
    <img id="fourth" src="tn/image-04.jpg" alt="fourth" />    
</div> 

<div class="largeImage"> 
    <img src="lg/image-01.jpg" alt="first" /> 
</div> 
<p id="fullscreen"> Here full screen</p> 

這是所使用的CSS：

body { 
    margin: auto; 
} 

#thumbsBox { 
    float: left; 
    margin-top: 300px; 
    width: 220px; 
    padding: 0px; 
} 

#thumbsBox img { 
    float: left; 
} 

.largeImage { 
    width: 900px; 
    height: 600px; 
    border: 1px solid #333333; 
    float: right; 
    margin-right: 200px; 
    margin-top: 100px; 
} 

.largeImage img { 
    width: 100%; 
    height: 100%; 
} 

.blurredThumb { 
    opacity: 0.7; 
} 


#thumbsBox img:hover { 
    float: left; 
    opacity: 0.7; 
} 

.fullscreen { 
    margin: 0px; 
    width: 100%; 
} 

和jQuery的

$(document).ready (function(){ 
    $('#thumbsBox img').click (function() { 
     $(".largeImage img").attr('src', this.src.replace('tn','lg')); 
    }); 

    $("#fullscreen").click (function() { 
     $("#thumbsBox").css('display', 'none'); 
     $(".largeImage").addClass('fullscreen'); 
    }); 
}); 

它正如我描述的那樣工作，當我必須改變圖像，但我無法弄清楚如何做出正確的選擇的圖像「全屏」。 歡迎任何提示。提前感謝您的幫助。

Answer 1

也許這是你的解決方案。請檢查：

$(document).ready (function(){ 
 

 

 
\t $('#thumbsBox img').click (function() { 
 

 
\t \t $(".largeImage img").attr('src', this.src.replace('tn','lg')); 
 

 

 

 
\t }); 
 

 

 

 
\t $("#fullscreen").click (function() { 
 

 
\t \t $("#thumbsBox").css('display', 'none'); 
 

 
\t \t $(".largeImage").addClass('fullscreen'); 
 
\t \t 
 
\t \t 
 

 
\t }); 
 

 

 
});

body { 
 
\t 
 
margin: auto; 
 

 
} 
 

 

 
#thumbsBox { 
 

 
float: left; 
 
margin-top: 300px; 
 
width: 220px; 
 
padding: 0px; 
 

 
} 
 

 
#thumbsBox img { 
 

 
float: left; 
 

 

 
} 
 

 

 

 
.largeImage { 
 

 

 
width: 900px; 
 
height: 600px; 
 
border: 1px solid #333333; 
 
float: right; 
 
margin-right: 200px; 
 
margin-top: 100px; 
 
    
 

 
} 
 

 
.largeImage img { 
 
width: 100%; 
 
height: 100%; 
 
    
 

 
} 
 

 

 
.blurredThumb { 
 

 
\t opacity: 0.7; 
 

 
} 
 

 

 
#thumbsBox img:hover { 
 

 
float: left; 
 

 
\t opacity: 0.7; 
 
} 
 

 
.fullscreen { 
 

 
\t margin: 0px; 
 
\t width: 100%; 
 
\t height: 70%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="thumbsBox"> 
 
    <img id="one" src="http://www.paolobergomi.it/sitob/tn/image-01.jpg" alt="first" class="blurredThumb"> 
 
    <img id="two" src="http://www.paolobergomi.it/sitob/tn/image-02.jpg" alt="second"> 
 
    <img id="three" src="http://www.paolobergomi.it/sitob/tn/image-03.jpg" alt="third"> 
 
    <img id="fourth" src="http://www.paolobergomi.it/sitob/tn/image-04.jpg" alt="fourth"> 
 
</div> 
 
    <div class="largeImage"> 
 
     <img src="http://www.paolobergomi.it/sitob/lg/image-03.jpg" alt="first"> 
 
    </div> 
 
    <p id="fullscreen"> Here full screen</p>