Basic eBay Design Series 2013 Part 6 Image Switching with Javascript

I REALLY wanted to do a pure CSS gallery, but it was getting far to complicated. So I opted for the simplest Javascript I know.

‘onmouseover’

It is a nice a simple addition to the responsive gallery structure:

The big main image needs to be given a name:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>

Then the thumbnail images need to swap on mouse over:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>

This means the gallery code is:

<div id="background">
<div id="template">
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>
</div><!--switch-gallery-column switch-gallery-main-->
</div><!--switch-gallery switch-gallery-row-->
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/highlight.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/juicy%20melons.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/pinup%20pink.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
</div><!--switch-gallery-crosspromo switch-gallery-row-->
<h1> Mouse over to zoom images</h1>
</div><!--template-->
</div><!--background-->

Next, is floating boxes and then a pulled together skeleton as this series has grown a little organically and I need to strip out some bits to make it easier to re-use.

Previous Post: Basic eBay Design Series 2013 Part 6 Shrinking Responsive Gallery

Be Sociable, Share!

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!

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

I wanted to add some swatches to one of my listings. Swatches are just blocks of colour so I want them to SHRINK and not stack with mobile.

So I am going to give you one patterns to use for a cross sell or swatch images area.

Lets start with how it LOOKS:

Desktop:

swatches

 

eBay App:

swatch images

Now I will give you a pattern for a 3×1 row that can be repeated.

The CSS:

.crosspromo {clear: both;padding: 0px;margin: 0px; text-align:center;}
.crosspromo img {width:60%;height: auto;}
.crosspromo p {text-align:center;}
.column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.column:first-child {margin-left: 0;}
.box {width: 32.2%;}
.row:before,.row:after {content:"";display:table;}
.row:after {clear:both;}The HTML:

The HTML:

<div class="crosspromo row">
<div class="column box">
<img alt="" src="http://geishaface.co.uk//ebay/atlantic.jpg" /><p>Atlantic</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" /><p>Highlight</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" /><p>Juicy Melons</p>
</div><!--column box-->
</div><!--crosspromo grid-->

Currently my crosspromo images are only 60% width, however – you can put any percentage here depending on style AND repeat this section. This methodology can also be used to create a grid for an image gallery with one large image at the top then three thumbnails. More on this later.

So you can use this type of format for cross promotion searches on eBay, swatch sections or anything you want to ‘shrink’ and no ‘stack’ to fit.

Current Responsive Template Code and how it looks on Responsivator

Previous Post:

Basic eBay Design Series 2013 Part 4 Responsive Images

Be Sociable, Share!

eBay New Stores Experience Promise

Right then, so my mind is in tip top condition for Catalyst with respects to the latest and greatest developments in eBay store design I am finally this weekend going to convert that Hairfreax PSD into a matching store frame on the new stores experience.

Promising full store compliance lets look at the key rules broken in the last store design:

Externalised CSS

Oh yes, I am guilty so all the css will now be held within the design pages, which is a right pain if you have to update your css as every page would need to be changed. A step back in coding evolution from eBay…

Using eBay’s own ID or class based rules

OK, so again I manipulated eBays css id’s and classes. Changing them is their prerogative and I will steer clear and make up my own funky names for things. Prepare for the ridiculous.

Basically, the new store will be a nice HTML based frame with the eBay gunk in the middle. I will bust my buttons to make sure the category pages also have this frame so the design is not splash-psge-esq. If I have to jump backwards and not externalise CSS I’m not taking another giant leap backwards by splash paging.

I’ll leave the splash pages to marketing freaks.

I am going to go backwards on this one a little, providing the full code up front then working backwards and breaking it down step by step. I know there are hungry bunnies out there wanting their next eBay design project fix and my time is limited so I want to concentrate on the bulk of the task in hand.

I will update on Saturday with how far I have got. As always the code and crappy images I create will be all free free free, and I won’t even ask you to link back or credit. I would just like see your eBay shop for your take on the framework!

Be Sociable, Share!

eBay Shop Design Lesson 8 – Promotion Boxes

As I rubbished the promo boxes with the last CSS changes I thought I should get back to them ASAP.

First list on the agenda was to get rid of those crazy ‘corner’ images for the promo boxes:

table#PromoListView table table img {
display: none;
}

but that also kills the promo box images (and the slider) so now I have to put back the bits I want:

table#PromoListView table table#Table3 img {
display: inline;
}

I still don’t have anything defined, and the default text of the box titles is just too pale, so I am going to pink it up:

#PromoListView tr td font
{
color:#FF00FF;
font-size:18px;
}

and I am going to make the item links in these promo boxes hot pink:

table#PromoListView a {
color:#FF00FF;
text-decoration:none;
}

then I shall encase each box with a border:
table#PromoListView {
border:1px #FFCCFF solid;
}

We have not changes the width or dimensions of the promo boxes but you would do this from the table#PromoListView section and using the !important tag. You can also add in backgrounds, images etc that have not been explored here.

Please as always read the disclaimer

The entire section looks like this:

/*Promo Boxes*/
/*hide ebay corner images*/
table#PromoListView table table img {
display: none;
}
/*correct the fact that the above kills the main image too*/
table#PromoListView table table#Table3 img {
display: inline;
}
/*item links*/
table#PromoListView a {
color:#FF00FF;
text-decoration:none;
}
/*box title text*/
#PromoListView tr td font
{
color:#FF00FF;
font-size:18px;
}
/*promo box border*/
table#PromoListView {
border:1px #FFCCFF solid;
}
/* -------- End -------- */

You can see the full css file here: eBay Store Design with CSS and to see the changes to my eBay store as we go along visit : http://stores.ebay.co.uk/Hairfreax

Next I shall sort out the shop search section, once I have found which table it corresponds too. Its seems to be avoiding me!

See what others have done with this information and while your at it buy from them!
http://stores.ebay.com/J-L-OUTDOOR-SUPPLY
http://stores.ebay.co.uk/Betterlifehealthcare
http://stores.ebay.it/TM-bazar

Edited to add:

If you want a background image for your store try the #paging id. This effects the background elements of your store. I will be getting down and dirty with the new compliance rules soon…

Be Sociable, Share!