Sharing Some CSS Fun

[Bruce - PhosphorMedia]

Client only wanted to show Click to Swap Images" if there where swap-able images with thumbnails. Couldn't find a variable to wrap that line of text so, used CSS.

<style>
.thumbnails li:last-of-type:after { content: "Click to Swap Image";
width: 180px;
display: block;
margin: 5px 0 0 0;
float: right;
text-align: center;
font-size: 12px;
font-style: italic;
}
</style>
<ul id="thumbnails" class="thumbnails" style="margin-top: 20px;">

Since the <li> elements are only present IF there are swappable images, this basically acts as its own condition test. Would probably need to fool around with positioning, but the above will give you a start.

[Siamese-Dream.Com]

Re: Sharing Some CSS Fun

Hi there, Bruce:

thanks for posting the code.

I am a little confused though.

does this go on the Category Pages or on the Product Pages?

thanks in advance.

[Bruce - PhosphorMedia]

Re: Sharing Some CSS Fun

Typically in the Product page, it could be used in the Category pages, but getting Image Machine to work on the category page is a bit of an effort unto itself.

Its also just an illustration of thought in that, at times, CSS can be used in place of standard coding.

[Siamese-Dream.Com]

Re: Sharing Some CSS Fun

Thanks for the explanation.

Ok, I wasn't sure 100% what the purpose was. However, I think it is this:

If there are multiple thumbnail images under the main image, show the "click to swap image" text so that customers know that by clicking a different thumbnail image, the main image will change to the corresponding large image.

is that the purpose of the code? (Just so I understand.)

Thanks in advance.

[Bruce - PhosphorMedia]

Re: Sharing Some CSS Fun

Mark,

Yes, that exactly...and maybe for other similar things.

The issue I ran into is that I couldn't find a variable that would let me check to see if a product HAD an additional image. However, since the additional images are loaded into an unordered list (<ul>) as:

<li>here's one</li><li>here's another</li><li>etc</li>

and the list is un-populated if there isn't (ie., <ul></ul>)

Then using the pseudo selector of ":last-of-type" would act as the 'conditional' since the formatting (in this case, actual content) would only appear if there was at least ONE <li>.

The pseudo selector of :after is used to separate the aforementioned content from the actual LI item (at least visually).

:after and :before are also really cool to use for things like action indicators. For example, having a small left arrow after an href link when you've removed the underline formatting:

<style>
.name a:after {
content: '\00a0 \25b6';
font-size: 16px;
</style>
<div class="name"><a href="www.url.com">For Women</a></div>

Which results small right pointing triangle after the link title. See attached image.

\00a0 \25b6 are CSS entity encoded characters for space and the triangle. (See http://brajeshwar.github.io/entities/ for complete list)

[Siamese-Dream.Com]

Re: Sharing Some CSS Fun

Thanks for the detailed explanation, Bruce.

I think I got it now.

The words "Click to Swap Image" will only appear ONCE then with the code you posted, and it will be "after" the last thumbnail image?

Right?

Again, thanks for posting this code and the other example for the arrow appearing after the a tags.

[Bruce - PhosphorMedia]

Re: Sharing Some CSS Fun

Yup!

[habreu]

Re: Sharing Some CSS Fun

That is nifty - thanks. Using it here http://www.allfrom1supply.com/mercha..._Code=pnt-cb-1