jQuery: handling an image gallery with pagination

HTML

<div id="gallery">
    <div id="gallery-wrapper"> <a href="#">
        <img src="https://lh3.googleusercontent.com/-I_jvkhAtzlM/Tk6TfaPnypI/AAAAAAAAAqw/ddMw0tBE42c/s600/typography-2.jpg" alt="" />
    </a>
 <a href="#">
        <img src="https://lh4.googleusercontent.com/-95kVEwdg_ic/T1MrarK-hJI/AAAAAAAAA3o/PsiOduD0eKg/s425/disappointment.jpg" alt="" />
    </a>
 <a href="#">
        <img src="https://lh3.googleusercontent.com/-ISQjG6q7XwQ/T1MrgdZa1ZI/AAAAAAAAA3o/iaNG5xtS0mo/s428/help-frustration.jpg" alt="" />
    </a>
 <a href="#">
        <img src="https://lh5.googleusercontent.com/-oAhHdVnnyg4/T1MrcEW9ByI/AAAAAAAAA3o/-zTma1DolLk/s425/fonts-web-fonts-typography.jpg" alt="" />
    </a>
 <a href="#">
        <img src="https://lh3.googleusercontent.com/-MP6drmKHpmc/T1Mrj1mAsDI/AAAAAAAAA3o/nqv3fXcyOCw/s387/mac.jpg" alt="" />
    </a>
 <a href="#">
        <img src="https://lh3.googleusercontent.com/-dBlww3_uc0c/T1tEOigFdMI/AAAAAAAAA8A/8UgXM2_XCEk/s500/writer.jpg" alt="" />
    </a>

    </div>
    <div id="gallery-image"></div>
</div>

CSS

img{
    height: 100px;
    width: 100px;
}
#gallery-wrapper { display:inline;}
#gallery-wrapper:hover img {
    opacity: 0.5;
}
#gallery-wrapper img:hover {
    opacity: 1;
}