Basic eBay Design Series 2013 Part 6 Shrinking Responsive Gallery

We shall expand the pattern and theory of the previous post and do a ‘switching image gallery’ format. In this post we will just look at the SHAPE.

The CSS:

<style>
.switch-gallery {clear: both;padding: 0px;margin: 0px; text-align:center; max-width:400px;}
.switch-gallery-main img {width:100%;height: auto;}
.switch-gallery-thumbs img {width:100%;height: auto;}
.switch-gallery-column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.switch-gallery-column:first-child {margin-left: 0;}
.switch-gallery-main {width: 100%;}
.switch-gallery-thumbs {width: 23.8%;}
.switch-gallery-row:before,.switch-gallery-row:after {content:"";display:table;}
.switch-gallery-row:after {clear:both;}
</style>

The HTML:

<div class="switch-gallery switch-gallery-row">
<div class="switch-gallery-column switch-gallery-main">
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" />
</div><!--switch-gallery-column switch-gallery-main-->
</div><!--switch-gallery switch-gallery-row-->
<div class="switch-gallery switch-gallery-row">
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
</div><!--switch-gallery-crosspromo switch-gallery-row-->

Notice for now, we have taken this section OUT of the normal template. This is because it will REPLACE the stacking grid image section as an alternative.

Currently this only LOOKS like a gallery. It will behave like one in the next post! We will look at pure CSS image switching for eBay listings.

Look at the subtle difference in the percentage here:

.switch-gallery-thumbs {width: 23.8%;}

Changing this percentage changes how many thumbs are PER row. For example use 18.72% for 5, and 15.33% for 6 in a row.

Responsive Switch Gallery

On Responsivator

Previous Post:Basic eBay Design Series 2013 Part 5 Cross sell & Shrinking Grid

Be Sociable, Share!