Question

I want to create a very simple, purely CSS photo slideshow/gallery with the "next" and "previous" buttons. I searched the web for days and finally found this little gem which suits me perfectly: http://codepen.io/ongtiffany/pen/PPbPyB

This is the html

<div id="gallerywrapper">
    <div id="gallery">
        <div id="pic1">
            <img src="http://dummyimage.com/500x350/999/fff" height="350" width="500" alt="Image 1">
            <a class="previous" href="#pic5">&lt;</a>
            <a class="next" href="#pic2">&gt;</a>
            <h3>Image 1</h3>
            <p>Text of image 1.</p>
        </div>
        <div id="pic2">
            <img src="http://dummyimage.com/500x350/777/fff" height="350" width="500" alt="Image 2">
            <a class="previous" href="#pic1">&lt;</a>
            <a class="next" href="#pic3">&gt;</a>
            <h3>Image 2</h3>
            <p>Text of image 2.</p>
        </div>
        <div id="pic3">
            <img src="http://dummyimage.com/500x350/555/fff" height="350" width="500" alt="Image 3">
            <a class="previous" href="#pic2">&lt;</a>
            <a class="next" href="#pic4">&gt;</a>
            <h3>Image 3</h3>
            <p>Text of image 3.</p>
        </div>
        <div id="pic4">
            <img src="http://dummyimage.com/500x350/333/fff" height="350" width="500" alt="Image 4">
            <a class="previous" href="#pic3">&lt;</a>
            <a class="next" href="#pic5">&gt;</a>
            <h3>Image 4</h3>
            <p>Text of image 4.</p>
        </div>
        <div id="pic5">
            <img src="http://dummyimage.com/500x350/111/fff" height="350" width="500" alt="Image 5">
            <a class="previous" href="#pic4">&lt;</a>
            <a class="next" href="#pic1">&gt;</a>
            <h3>Image 5</h3>
            <p>Text of image 5.</p>
        </div>
    </div>
</div>

This is the CSS

#gallerywrapper {
 width:640px;
 height:450px;
 margin:0 auto;
 position:relative;
 font-family:verdana, arial, sans-serif;} 

#gallerywrapper #gallery {
 position:absolute;
 left:0;
 top:0;
 height:450px;
 width:640px;
 overflow:hidden;
 text-align:center; } 

 #gallerywrapper #gallery div {
 width:640px; height:900px; 
 padding-top:10px; 
 position:relative; } 

 #gallerywrapper #gallery div img {
 clear:both; 
 display:block; 
 margin:0 auto; 
 border:0; } 

 #gallerywrapper #gallery div h3 {
 padding:10px 0 0 0; 
 margin:0; 
 font-size:18px; } 

 #gallerywrapper #gallery div p {
 padding:5px 0; 
 margin:0; 
 font-size:12px; 
 line-height:18px; } 

 #gallery .previous{ 
 display:inline;
 float:left;
 margin-left:80px;
 text-decoration:none; } 

 #gallery .next{ 
 display:inline;
 float:right;
 margin-right:80px;
 text-decoration:none; }

Now this works perfectly if there are only a handful of small images. Unfortunately, I have over 50 images (each around 2 MB), and if I use the above code, it would mean putting all those 50 images onto one html, and that would mean very long loading times. Also I don't want to create 50 html pages for each image.

So my question is this, is there a way to create a similar, very simple, purely CSS image gallery/slideshow but one in which all the images aren't on the same html? It's like having just one html page, with a smaller square webpage in the middle, and when I click the previous or next button, an image is loaded into that smaller webpage, while the rest of the page remains the same. Kind of like embedding I guess. Is it possible to do this? Thank you in advance!

P.S: I don't want to reduce the size of the images and I don't want to use JavaScript (hence the "purely CSS" in the title)

Very simple, purely CSS image gallery/slideshow without having to pre-load all images

0 个答案: