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 set numerous links in a single line with CSS?

    How can I make a div 100% of the browser window height, but with a top and bottom margin?

    (Mobile View) How to make UI tabs heading to work as a drop down

    How to set borders between children from parent in CSS?

    how to hidden image over image in css

    How to print multiple elements in a page individually using css?

    How to write a PHP code that will group students into groups of ten using data from a database? [closed]

    How apply CSS to browse button

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to manipulate SVG element style with javascript?

    How to style nested ID-elements in CSS/SASS

    How to wrap lines in an inline-block with CSS?

    How do I use CSS transitions to fixed position a scaled element?

    CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

    How to assign inner shadow to inputs in CSS

    How do I center this menu?

    How to make an element stretch to the same height as its container?

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    How to turn off element CSS background when dragged

    HTML/CSS How to apply CSS to “a” with custom data attribute?

    How to edit css live with ie6

    How to add background-image onto the first option of a dropdownlist

    how to add style to form under echo statement by css [closed]

    CSS/HTML How to align these elements for a mobile view?

    How to make arrow in CSS with angle?

    How to force firefox to use custom CSS for anchor tags that contain “#” or “javascript:”?

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    How to reanimate div with jquery after using css keyframe animation

    how to have a div with two images in any of 9 possible positions

    Japanese Text not showing correctly