How can I add pagination to my site's gallery?


Tags: css,css3,pagination,thumbnails,image-gallery

Problem :

I'm trying to integrate CSS pagination into a thumbnail gallery I have set up on my site. So far, I haven't found any tutorials pointing to how to customize pagination into a existing script.

From what I see out there, there are a lots of great CSS pagination solutions. Here's a page with lots of pagination stylings (no plugins, integration seems to be very general so any will do). I've downloaded a few in hope that a tutorial directs me to what I want but have had no luck so far.

My code is taken from Pure CSS image gallery. I had a look at integrating Gallerific but found the instructions difficult, and so I'm looking for a pure CSS solution.

At first I wanted to used multiple div's for the same gallery, much like Gallerific, only to find JavaScript (or some kind of jQuery solution) would be needed to connect the links necessary for the gallery to work like that.

Currently, the gallery is contained within one div (the way it has to be in order to work). I'm looking at adding pagination just on the thumbs e.g. "...<a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" /> ..."

And here for purpose of the post is my code so far:

<div id="gallerycenter">

        <ul id="gallery">

            <li>
                <a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" />
                <span><img src="images/img/01.jpg" id="prev01" class="showcase" alt="" /></span></a>
            </li>
            <li>
                <a href="#prev02"><img src="images/img/thmbs/02.jpg" alt="" class="thumb" />
                <span><img src="images/img/02.jpg" id="prev02" class="showcase" alt="" /></span></a>
            </li>
            <li>
                <a href="#prev03"><img src="images/img/thmbs/03.jpg" alt="" class="thumb" />
                <span><img src="images/img/03.jpg" id="prev03" class="showcase" alt="" /></span></a>
            </li>
            <li>
                <a href="#prev04"><img src="images/img/thmbs/04.jpg" alt="" class="thumb" />
                <span><img src="images/img/04.jpg" id="prev04" class="showcase" alt="" /></span></a>
            </li>
            <li>
                <a href="#prev05"><img src="images/img/thmbs/05.jpg" alt="" class="thumb" />
                <span><img src="images/img/05.jpg" id="prev05" class="showcase" alt="" /></span></a>
            </li>

        </ul>

</div>

The only thing I have thought of but haven't tried is changing the ".thumb" to ".pagination" in order to start the "pagination" in a class form but still, that doesn't give me enough to go on

Can anyone help me piece together the possibilities or confirm that I'm crazy and I'm asking way too much of CSS?



Solution :

You've misunderstood the link you posted. It is providing style only, not functionality, because CSS does not provide this functionality. Pagination is not a matter of adding style to a page, it is achieved programatically, either server-side or in client-side JavaScript. You should pick an existing jQuery pagination plugin and use it, you will not find a solution which uses only CSS to provide pagination as that is fundamentally not what CSS is for.


    CSS Howto..

    How to make a parent --> node relationship in css?

    How to fix a double click on a jQuery slide up/down animation?

    How to reverse jQuery css styling?

    how to display products side by side

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How is BBC changing colours based on temperature? CSS?

    CSS - How to remove white
    margins

    How to replace a Font Awesome icon within link text with a different icon on link click?

    How to override inline css through javascript?

    How to use CSS to vertically center a form in a div

    how to make a title div center aligned

    How can I create left & right side fixed width elements with a center that fills the remainder?

    How can I make a border wrap around a group of pictures?

    jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    How to add another two full width sections below (CSS)

    How to apply SVG filter to an element?

    How to vertically align inline-block elements with height set and test with browser tools

    How to use css style in php

    How to be able to preload jquery contents into hidden tabs for ie browser

    divs hide and show

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How do I set css using jQuery .css after a period of time?

    How to animate a copy of the div from the current position to the top right

    How to configure CSS with Spring MVC and Tiles

    How do I select this Div with CSS

    how to change collapse direction of a panel in bootstrap

    How does this CSS produce a circle?

    HTML/CSS: How to use another font for list-item Bullets

    How to give the background-image path in CSS?