New Project . . . New Questions Using Columns

It has been a spell since I have been in here pestering. I am playing with a new project and I have hit a problem that I have no clue as to how to deal with correctly. With that in mind, I am asking for some expert help - if you don't mind.

What I need some help with is on this particular page I want to have a Specifications section and in this section, I am looking at doing 2 columns that line up automatically at the top. For these two columns, I want the first column to show something like WEIGHT: and then in the second column I want it to show like 5 LBS with some separation between the 2 columns.

Currently I have it looking the way I want it to look, but I can guarantee you that it is not coded any where near correctly.

So if one of the experts would be willing to take a look at my code and suggest a fix, I would really appreciate it.

My css for this page looks like:

 
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

font-family {
    arial,helvetica,sans-serif;
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

body {
    background:#FFF;
}

#contentWrapper {
    max-width: 69em;
    margin: 0 auto;
    overflow:hidden;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #000;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #000;
    -webkit-border-radius:
        1em;
    border-radius:
        1em;
    background: #FFF;
}

* html #contentWrapper {
    width:55em;
}

h1 {
    padding-left: 0;
    font-size: 100%; 
    -webkit-border-radius:
        1em 1em 0 0;
    border-radius:
        1em 1em 0 0;
}

h1 a {
    position: relative;
    display: block;
    padding: 40px 0;
    text-decoration: none;
    font: bold 40px/44px arial,helvetica,sans-serif;
    color: #000;
}

h1 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 109px;
    background: url(images/header.jpg) center no-repeat;
    -webkit-border-radius:
        0.4em 0.4em 0 0;
    border-radius:
        0.4em 0.4em 0 0;
}

h1 small {
    display:block;
    font:bold 48%/120% arial,helvetica,sans-serif;   
}

h2{
    font-size: 1.5em;
}

.clear-both {
   clear: both;
}

#productWrapper {
    padding: 1em;
    background: #FFF;
}

#productInfo {
    background: #FFF;
    margin: -32em 0 0 37em;
    padding-top: 0.5em;
    width: 30em;
    height: auto;
    font-family: arial,helvetica,sans-serif;
    color: #000;
    font: 1em;
}

#purchaseInfo {
    width: 19em;
    height: 24em;
    margin: 2em 0 0 40em;
    padding: 1em;
    color: #000;
    border: 1px solid #0195C5;
}

#purchaseInfo ul {
    margin-top: 2em;
}

#purchaseInfo li {
  list-style-type: none;
  max-width: 20em;
  margin: -1em 0 1em 0;
  font: 1em;
}

#purchaseInfo li .price {
  color: red;
  font-size: 1.5em;
}

#purchaseInfo li > b {
  width: 6em;
  display: inline-block;
}

#purchaseInfo li del, li span {
  text-align: left;
  display: inline-block;
  margin-left: 2em;
}

#total {
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font: 1.5em;
    padding: 2em 1em 0 0;
    display: inline;
}

#totalPrice {
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    color: red;
    display: inline;
    padding-bottom: 4em;
}

#purchaseInfo ul {
    list-style: none;
}

#purchaseInfo li {
    padding-bottom: 1.25em;
}

#purchaseInfo img {
    display: block;
    margin: 0 auto;
    padding: 2em 0 2em 0;
}

#bar {
    width: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#012C70), to(#000));
    height: 2.5em;
    margin-top: 5em;
}

#bar p {
    padding: 0.5em 0 0 1em;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    color: #FFF;
}

#description {
    padding: 1em;
}

#description p {
    padding: 0.5em 3em 0 2em;
    font-family: arial,helvetica,sans-serif;
    color: #000;
    font: 1em;
}

#description ul {
    margin: 0 0 1.5em 0;
    padding: 1em;
    color: #000;
}

#description li {
    margin-left: 2em;
    font-family: arial,helvetica,sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

#specsA {
    font-size: 1em;   
}

#specsA ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 1em;
    color: #000;
}

#specsA li {
    margin-left: 2em;
    font-family: arial,helvetica,sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

#specsB {
    text-decoration: none;
    margin: -38em 0 0 15em;
    font-size: 1em;
}

#specsB ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 1em;
    color: #000;
}

#specB li {
    margin-left: 2em;
    font-family: arial,helvetica,sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

#delivery {
    width: 100%;
    text-align: center;
    margin-top: 2em;
    font-family: arial,helvetica,sans-serif;
    font-size: 1.1em;
}

#paymentMethods {
    text-align: center;
}

#footer {
    width: 100%;
    text-align:center;
    padding:1em;   
    height: 2em;
    background: -webkit-gradient(linear, left top, right top, from(#012C70), to(#000));
}

#footer p {   
    font-family: arial,helvetica,sans-serif;
    color:#FFF;
}

#footer span {
  margin-right: 40px;
}

Code (markup):

And my HTML for the page looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="Robots" content="index, follow">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <meta name="description" content="Vintage Harry Potter Notebook/Diary Book/Hard Cover Note Pad/Agenda Planner/2017-2018-2019 calendar">
    <link rel="stylesheet" href="screen2.css" media="screen,projection,tv">
    <title>Vintage Harry Potter Notebook | HouseofHarry.com</title>
    <link rel="shortcut icon" href="/images/favicon.png">   

  </head>

<html>

<body>

    <div id="contentWrapper">
        <h1>
            <a href="/">
                US Direct Goodies
                    <span><!-- image sandbag --></span>
                    <small>All The Great Goodies You Want & Need</small>
            </a>
        </h1>
       
       
       
        <div id="productWrapper">
            <img src="images/black-focus-flashlight-torch.jpg" alt="Vintage Harry Potter Notebook/Diary Book/Hard Cover" />           
                <div id="productInfo">
                    <h2>E6 XML T6 1800LM 10W 5 Modes Focus Flashlight Torch Black</h2>
                </div>
                        <div id="purchaseInfo">
                            <div id="total">Your Price:</div><div id="totalPrice">$17.08 USD</div>
                            <br><br>
                                <ul>
                                    <li><b>List Price:</b><del>$12.49 USD</del></li>                               
                                    <li><b>You Save:</b><span class="price">$3.50</span></li>
                                </ul>
                                           
                            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="HVDS8AR6EA4GC">
    <input type="image" src="images/cart.jpg" alt="shopping cart" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="PayPal - The safer, easier way to pay online" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>               
                        FREE SHIPPING WORLDWIDE<br><br>
                        100% SATISFACTION GUARANTEE<br><br>
                        100% SECURE PAYMENTS Through PayPal
                       
                    <!-- purchaseInfo --></div>
                <!-- productInfo --></div>
               
            <div id="bar">
                <p>Product Description</p>
            <!-- bar --></div>
               
            <div id="description">
                <p>The beam of light from this flashlight is bright and wide. The bright beam can be seen miles away in the dark, that you can use it to guide your ways. Widely used, it is a wonderful tool for household use! This flashlight is features high-quality material that is sturdy and durable enough for extended daily use.</p>
                <br><br>
                <b>FEATURES</b>
                    <ul>
                        <li>This flashlight uses of a 10W bulb, producing very bright beam of light</li>
                        <li>This flashlight uses a smooth reflector. This reflector provides a more concentrated beam, and therefore a better throw</li>
                        <li>The body of this flashlight is built of high quality aluminum alloy, and it has a very solid construction</li>
                        <li>Internal wiring applies the high efficient booster circuit, and can utilize the batteries in the largest extent</li>
                        <li>Waterproof, suitable for outdoor environment, adverse weather conditions except for diving</li>
                        <li>Focus function that allows the beam to be focused</li>
                    </ul>
               
                <div id="specsA">
                    <b>SPECIFICATIONS:</b><br>
                        <ul>
                            <li>Dimensions: </li>
                            <li>Weight: </li>
                            <li>Emitter Type: </li>
                            <li>Lumens:    </li>
                            <li>Power: </li>
                            <li>Bulb Quantity: </li>
                            <li>Light Color: </li>
                            <li>Lightbulb Lifespan: </li>
                            <li>Modes: </li>
                            <li>Mode Arrangement: </li>
                            <li>Lighting Distance: </li>
                            <li>Battery Configuration: </li>
                            <li>Input Voltage: </li>
                            <li>Runtime: </li>
                            <li>Switch Type: </li>
                            <li>Switch Location: </li>
                            <li>Lens: </li>
                            <li>Reflector: </li>
                            <li>Material: </li>
                            <li>Color: </li>
                            <li>Waterproof: </li>
                            <li>Lanyard: </li>
                            <li>Focusing: </li>
                        </ul>
                </div>
               
                <div id="specsB">
                        <ul>                       
                            <li>(5.71 x 1.50 x 1.10)" / (14.5 x 3.8 x 2.8)cm / (L x Head Dia. x Body Dia.)</li>
                            <li>168 g / 5.93 oz</li>
                            <li>T6</li>
                            <li>1800 Lumens</li>
                            <li>10W</li>
                            <li>1</li>
                            <li>White</li>
                            <li>100000 hours</li>
                            <li>5</li>
                            <li>Hi > Mid >Lo > Strobe >SOS</li>
                            <li>200m</li>
                            <li>1 x 18650 battery / 3 x AAA Batteries (not included)</li>
                            <li>3.7-4.2V</li>
                            <li>2-3 hours</li>
                            <li>Clicky / Clickie</li>
                            <li>Tail-cap</li>
                            <li>Convex Lens</li>
                            <li>Aluminum Smooth / SMO Reflector</li>
                            <li>Aerospace aluminum alloy</li>
                            <li>Black</li>
                            <li>Yes</li>
                            <li>Yes</li>
                            <li>Yes</li>                           
                        </ul>
                </div>   
               
                <b>Package Includes:</b>
                    <ul>
                        <li>1 x T6 LED Flashlight</li>
                        <li>1 X AAA Battery Holder</li>
                        <li>1 X 18650 Battery Holder</li>
                       
                <div id="delivery">Please allow 7 - 10 days delivery time</div>           
            <!-- description --></div>

            <div id="paymentMethods">
                <img src="/images/payment.jpg" alt="payment methods">
            <!-- paymentMethods --></div>
       
        <!-- productWrapper --></div>
   
    <!-- contentWrapper --></div>

</body>

</html>

Code (markup):

Thanks for taking a look at this . . .

 

I would go with the dl (description list {re-purposed and renamed in html5}). This is properly a table also, but the first field consists of headings ( th ) and there is only a single datum field for each heading. The dl seems well suited for this.

<h2?>Specifications</h2?> <!-- you're not marking your headings properly -->
  <dl>
    <dt>Dimensions:</dt>
      <dd>5.71 x 1.50 x 1.1in / 14.5 x 3.8 x 2.8cm</dd>

    <dt>Weight:</dt>
      <dd>168 g / 5.93 oz</dd>

    ...
</dl>

Code (markup):

cheers,

gary

 

The use of a DL isn't a bad one, even under the old description of terms and definitions it would be fine. I'm just wondering why some obvious H3 are <b> tags, why an obvious <h3> is a <p>...

... or if you went the table route, one of those <b> would be a <caption>... yeah, I'd say suck it up and use a table so you have a proper 1:1 semantic relationship.

If it's not a proper name or legal entity, it doesn't go in <b>old, as in "would be bold in a properly written document for grammatical reasons".

I'd likely go with something like this SEMANTICALLY:

<table class="specifications">
	<caption>SPECIFICATIONS:</caption>
	<tbody>
		<tr>
			<th scope="row">Dimensions:</th>
			<td>(5.71 x 1.50 x 1.10)" / (14.5 x 3.8 x 2.8)cm / (L x Head Dia. x Body Dia.)</td>
		</tr><tr>
			<th scope="row">Weight:</th>
			<td>168 g / 5.93 oz</td>
		</tr><tr>
			<th scope="row">Emitter Type:</th>
			<td>T6</td>
		</tr><tr>
			<th scope="row">Lumens:</th>
			<td>1800 Lumens</td>
		</tr><tr>
			<th scope="row">Power:</th>
			<td>10W</td>
		</tr><tr>
			<th scope="row">Bulb Quantity:</th>
			<td>1</td>
		</tr><tr>
			<th scope="row">Light Color:</th>
			<td>White</td>
		</tr><tr>
			<th scope="row">Lightbulb Lifespan:</th>
			<td>100000 hours</td>
		</tr><tr>
			<th scope="row">Modes:</th>
			<td>5</td>
		</tr><tr>
			<th scope="row">Mode Arrangement:</th>
			<td>Hi > Mid >Lo > Strobe >SOS</td>
		</tr><tr>
			<th scope="row">Lighting Distance:</th>
			<td>200m</td>
		</tr><tr>
			<th scope="row">Battery Configuration:</th>
			<td>1 x 18650 battery / 3 x AAA Batteries (not included)</td>
		</tr><tr>
			<th scope="row">Input Voltage:</th>
			<td>3.7-4.2V</td>
		</tr><tr>
			<th scope="row">Runtime:</th>
			<td>2-3 hours</td>
		</tr><tr>
			<th scope="row">Switch Type:</th>
			<td>Clicky / Clickie</td>
		</tr><tr>
			<th scope="row">Switch Location:</th>
			<td>Tail-cap</td>
		</tr><tr>
			<th scope="row">Lens:</th>
			<td>Convex Lens</td>
		</tr><tr>
			<th scope="row">Reflector:</th>
			<td>Aluminum Smooth / SMO Reflector</td>
		</tr><tr>
			<th scope="row">Material:</th>
			<td>Aerospace aluminum alloy</td>
		</tr><tr>
			<th scope="row">Color:</th>
			<td>Black</td>
		</tr><tr>
			<th scope="row">Waterproof:</th>
			<td>Yes</td>
		</tr><tr>
			<th scope="row">Lanyard:</th>
			<td>Yes</td>
		</tr><tr>
			<th scope="row">Focusing:</th>
			<td>Yes</td>                           
		</tr>
	</tbody>
</table>

Code (markup):

Good rule of thumb, if the data for your ROWS is halfway across the bloody markup from the text describing said data, your code is inaccessible trash.

Gary's suggestion of a numbered heading and a DL is also a good one.

ANOTHER approach would be to treat it as a single unordered list, since you have TEXT content and that TEXT is doing a pretty good job ALL ON ITS OWN of saying what's what... in that case I'd give serious consideration to simply doing:

	<h3>SPECIFICATIONS:</h3>
	<ul class="specifications">
		<li><span>Dimensions:</span> (5.71 x 1.50 x 1.10)" / (14.5 x 3.8 x 2.8)cm / (L x Head Dia. x Body Dia.)</li>
		<li><span>Weight:</span> 168 g / 5.93 oz</li>
		<li><span>Emitter Type:</span> T6</li>
		<li><span>Lumens:</span> 1800 Lumens</li>
		<li><span>Power:</span> 10W</li>
		<li><span>Bulb Quantity:</span> 1</li>
		<li><span>Light Color:</span> White</li>
		<li><span>Lightbulb Lifespan:</span> 100000 hours</li>
		<li><span>Modes:</span> 5</li>
		<li><span>Mode Arrangement:</span> Hi > Mid >Lo > Strobe >SOS</li>
		<li><span>Lighting Distance:</span> 200m</li>
		<li><span>Battery Configuration:</span> 1 x 18650 battery / 3 x AAA Batteries (not included)</li>
		<li><span>Input Voltage:</span> 3.7-4.2V</li>
		<li><span>Runtime:</span> 2-3 hours</li>
		<li><span>Switch Type:</span> Clicky / Clickie</li>
		<li><span>Switch Location:</span> Tail-cap</li>
		<li><span>Lens:</span> Convex Lens</li>
		<li><span>Reflector:</span> Aluminum Smooth / SMO Reflector</li>
		<li><span>Material:</span> Aerospace aluminum alloy</li>
		<li><span>Color:</span> Black</li>
		<li><span>Waterproof:</span> Yes</li>
		<li><span>Lanyard:</span> Yes</li>
		<li><span>Focusing:</span> Yes</li>
	</ul>

Code (markup):

On the assumption this is just a simple SINGLE list of information and letting the TEXT CONTENT do what TEXT CONTENT does. The use of SPAN is for style, NOT meaning -- what SPAN is in fact for. Just set them to display:inline-block and set the desired width, and boom, looks like a column.

... though if you want to avoid de-indent pad the left side of the UL, float:left and negative margin the SPAN into the padding, and boom, columns.

The TABLE or DL might add semantics, but one has to question IF that added semantics is doing anything the content itself really needs to convey. If not, the simpler smaller markup of a single list may in fact be just as valid...

 

Thanks for the suggestions. I am not all that familiar with tables so I need to do some reading up on how to style tables. My concern is, can a table be styled to be responsive? I know this may be a stupid question, but like I said, I know almost nothing about tables.

 

I have tried going the table route and probably due to my lack of experience with tables, I could get it look acceptable on desktop, but could not figure out how to get it to look acceptable when it collapsed. So I tried the <dl> that Gary suggested. I had never head of a description list before, so I did some reading up on it and gave it a try and it seems to have worked like a charm.

I have it set up now so that it looks one way on desktop and then modified it to work when the page is collapsed and it looks pretty good to me.

I think I am starting to get the idea of how @media works, but I don't think I am fully understanding when and where to use page breaks. There does not seem to be any kind of standardized screen sizes to go by so is it safe to assume that it is a 'guess and by god' approach to when and where to apply page breaks. I have been told to let the content dictate when page breaks go, and that makes sense to me up to a certain point, like with using images or something significant, but other than that, it don't make much sense to me.

Anyway, if there is a chance ya'll could take a look at the finished page (test.allvixen.com/page2.php), I would really appreciate any suggestions as to what I can do to improve the code or the design. I am especially interested in knowing if it looks like I am catching on to how media queries work as well as any suggestions regarding that as well.

Thanks again for the suggestions. I think I am making some progress.

 

Actually, there are very specific points at which to apply your breakpoints. Narrow your browser window until the layout breaks. That's your breakpoint. Use em values for your @media query. Make your css changes to fix the layout; then continue to narrow the window until it breaks again. That's your next breakpoint. Continue to narrow and fix as needed until you're down to ~320px window width.

That's my method. It works for me, though YMMV.

cheers,

gary

 

Okay . . . but let me ask you a stupid question.

When I narrow the browser and it breaks (I assume by break you mean where the layout changes?) how do I know what the width is? Is there some way to determine it through the browser or something?

I got another question for you guys.

Is it considered good form to incorporate JS with pure CSS (for lack of a better way to describe it)?

I am looking at utilizing a column of thumbnails to the left of or below the main image so that when you either mouseover or click on the thumbnail it displays a larger image in a specific location. I have looked into this and it looks like it is done with JS and I am wondering if it can be done with CSS or is it acceptable to use JS?

Thanks in advance and for all the help . . .

 

Handy extension for firefox filled with stuff I use daily:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Under "resize" on the menu it adds, tick "show window size"

Your queries for content should be based in EM, so divide by whatever your default font size is. I recommend adding 0.5em and then rounding up to the next nearest 0.5em just due to font rendering differences across systems.

As to your second question, the BEST approach is to first code it normally so that it will just load the image:

<a href="images/yourPicture@fullSize.png">
  <img src="images/yourPicture@thumbnail.png" alt="Describe this image!">
</a>

Code (markup):

But then use JavaScript to take that baseline safe fallback markup, and turn it INTO the scripted version. I would NOT waste time trying to pure-CSS that scenario, instead allowing scripting off users to just use the page like any normal gallery. The reason I wouldn't pure-CSS it is that if the user doesn't hover or click the thumbs, a pure CSS solution STILL has to load the full size image "viewed or not" -- and that's just a waste of bandwidth.

 

I had a feeling that going the JS route for this situation was the right way to go, but I just wanted to be sure.

Let me ask you, is showing these extra images worth the extra effort? I mean do the extra images add any real value?

Just in case that it does, I got a script that is pretty much working, but I need some help as to how to get it to do exactly what I want/need it to do. The script is for a mouseover and it does that just fine. The problem is that nothing shows until you actually do the mouseover. I have tried just adding an image, but when I do that, as soon as you do the mouseover, it shows the static image as well as the mouseover image below it and I have no clue how to fix this.

The JS code is:

jQuery.noConflict()

jQuery.thumbnailviewer2={
        loadmsg: '<img src="images/ac-voltage-detector-tester-pen.jpg" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

    /////NO NEED TO EDIT BEYOND HERE////////////////

    dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
    buildimage:function($, $anchor, setting){
        var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
        if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
        return $(imghtml)
    },

    showimage:function($image, setting){
        $image.stop()[setting.fxfunc](setting.fxduration, function(){
            if (this.style && this.style.removeAttribute)
                this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
        })
    }
   
}


jQuery.fn.addthumbnailviewer2=function(options){
    var $=jQuery

    return this.each(function(){ //return jQuery obj
        if (this.tagName!="A")
            return true //skip to next matched element

        var $anchor=$(this)
        var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
        s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
        s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
        if (s.preload=="yes"){
            var hiddenimage=new Image()
            hiddenimage.src=this.href
        }
        var $loadarea=$('#'+s.targetdiv)
        var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
        var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
        $anchor.unbind(triggerevt).bind(triggerevt, function(){
            if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
                return false
            $loadarea.data('$curanchor', $anchor)
            if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
                $loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
            }
            $loadarea.html($.thumbnailviewer2.loadmsg)
            var $hiddenimage=$hiddenimagediv.find('img')
            if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
                var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
                $hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
                    var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
                    $loadarea.empty().append($targetimage) //show enlarged image
                    $.thumbnailviewer2.showimage($targetimage, s)
                })
            $loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
            }

            if ($hiddenimage.get(0).complete)
                $hiddenimage.trigger('loadevt')
            else
                $hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
            return false
        })
    })
}

jQuery(document).ready(function($){
    var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
    $anchors.each(function(i){
        var options={}
        var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
        for (var i=0; i<rawopts.length; i++){
            var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
            options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
        }
        $(this).addthumbnailviewer2(options)
    })
})

Code (markup):

And my HTML:

<div id="productWrapper">           
            <div id="loadarea" style="width: 500px"></div>
            <div id="thumbnails">
                <a href="images/ac-voltage-detector-tester-pen.jpg" rel="enlargeimage" rev="targetdiv:loadarea"><img src="/images/ac-voltage-detector-tester-pen_80x80.jpg"></a>
                <a href="images/ac-voltage-detector-tester-pen2-lg.jpg" rel="enlargeimage" rev="targetdiv:loadarea"><img src="/images/ac-voltage-detector-tester-pen2.jpg"></a>
                <a href="images/ac-voltage-detector-tester-pen3-lg.jpg" rel="enlargeimage" rev="targetdiv:loadarea"><img src="/images/ac-voltage-detector-tester-pen3.jpg"></a>
                <a href="images/ac-voltage-detector-tester-pen4-lg.jpg" rel="enlargeimage" rev="targetdiv:loadarea"><img src="/images/ac-voltage-detector-tester-pen4.jpg"></a>
                <a href="images/ac-voltage-detector-tester-pen5-lg.jpg" rel="enlargeimage" rev="targetdiv:loadarea"><img src="/images/ac-voltage-detector-tester-pen5.jpg"></a>
            <!-- end #thumbnails --></div>

Code (markup):

My CSS:

#productWrapper {
    padding: 1em;
    background: #FFF;
}

#loadarea {
    width: 100%; 
    max-width: 500px;
}

#thumbnails {
    width: 500px;
    margin-left: 1.75em;
    display: inline;
}

#thumbnails img {
    width: 70px;
    margin-right: 1em;
    border: 1px solid #000;
}

Code (markup):

And my final problem is not being able to get the thumbnails to center up under the main/large image. I tried margin: 0 auto; as well as text-align: center; and neither centers the images.

Thanks for looking at this and for your suggestions . . .

 

On which element(s) did you add the text-align property? It should be on the parent or other ancestor.

cheers,

gary

 

Originally I had text-align added to the #thumbnails last night. It did not seem to work. I plugged it back in this morning and now it seems to be working. Imagine that. LOL

So now my question is still . . . does having more images add any real value to a page or is just to look pretty?

And if it does add some real value, then I need to find out how to fix the problem with no initial image showing until someone happens to mouseover the thumbnails. Maybe someone could direct me as to what to do a search for so i can try to figure this out on my own? My searches aren't turning upmuch.

So what do ya think?

 

1) why are you abusing REV for something it doesn't mean, and just randomly making up rel attribute values?!?

2) Why are you using a DIV instead of just using an IMG tag containing the default image, on which you can then CHANGE the src instead of dicking around with all that "code for nothing".

3) at that point you have a LIST of thumbnails, so get your semantics in there... a single good wrapper with a data attribute would likely also be a better choice than abusing rev or wasting markup putting it on every joe-blasted anchor.

4) Seriously, kick that jQuery-tard BS to the curb!

<div id="productWrapper">           
	<img
		src="images/ac-voltage-detector-tester-pen.jpg"
		alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
		id="loadArea"
	>
	<ul class="thumbnails" data-thumbsFor="loadArea">
		<li>
			<a href="images/ac-voltage-detector-tester-pen.jpg">
				<img
					src="/images/ac-voltage-detector-tester-pen_80x80.jpg"
					alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
				>
			</a>
		</li><li>
			<a href="images/ac-voltage-detector-tester-pen2-lg.jpg">
				<img
					src="/images/ac-voltage-detector-tester-pen2.jpg"
					alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
				>
			</a>
		</li><li>
			<a href="images/ac-voltage-detector-tester-pen3-lg.jpg">
				<img
					src="/images/ac-voltage-detector-tester-pen3.jpg"
					alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
				>
			</a>
		</li><li>
			<a href="images/ac-voltage-detector-tester-pen4-lg.jpg">
				<img
					src="/images/ac-voltage-detector-tester-pen4.jpg"
					alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
				>
			</a>
		</li><li>
			<a href="images/ac-voltage-detector-tester-pen5-lg.jpg">
				<img
					src="/images/ac-voltage-detector-tester-pen5.jpg"
					alt="DESCRIBE THIS IMAGE!!! ALT IS NOT OPTIONAL!!!!!"
				>
			</a>
		</li>
	</ul>

Code (markup):

Scripting for that would go something like this:

(function(d) {

	// first some handy helper functions
	
	/*
		laughably these polyfills for old browsers are FASTER than
		Element.classlist despite using regex!?! DERP!
		
		You'd almost think JS strings were faster than JS objects and arrays
	*/
	
	function classAdd(e, n) {
		if (!classExists(e, n)) e.className += (e.className ? ' ' : '') + n;
	}

	function classExists(e, n) {
		return RegExp('(\\s|^)' + n + '(\\s|$)').test(e.className);
	}

	function classRemove(e, n) {
		e.className = e.className.replace(
			new RegExp('(\\s|^)' + n + '(\\s|$)'), ' '
		) . replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
	}
	
	function eventAdd(e, event, callback) {
		if (e.addEventListener) e.addEventListener(event, callback, false);
		else e.attachEvent('on' + event, callback);
	}
	
	function eventPrevent(e) {
		e = eventProcess(e);
		// this is probably overkill -- oh who are we kidding, it is!
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
		return e;
	}

	function eventProcess(e) {
		e = e || window.event;
		if (!e.target) e.target = e.srcElement;
		return e;
	}

	// then our actual functionality!
	
	function anchorOver(e) {
		e = eventProcess(e);
		var overTarget = e.target['data-overTarget'];
		overTarget.src = e.target.parentNode.href;
		overTarget.alt = e.target.alt;
		if (overTarget['data-overCurrent'])
			classRemove(overTarget['data-overCurrent'], 'current');
		overTarget['data-overCurrent'] = e.target;
		classAdd(e.target, 'current');
	}
	
	var
		ul = d.getElementsByTagName('ul'),
		target;
		
	for (var i = 0, iLen = ul.length; i < iLen; i++) if (
		(target = ul[i].getAttribute('data-thumbsFor')) &&
		(target = d.getElementById(target))
	) {
		var thumbs = ul[i].getElementsByTagName('img');
		for (var j = 0, jLen = thumbs.length; j < jLen; j++) {
			thumbs[j]['data-overTarget'] = target;
			if (target.src == thumbs[j].parentNode.href) {
				target['data-overCurrent'] = thumbs[j];
				classAdd(thumbs[j], 'current');
			}
			eventAdd(thumbs[j], 'mouseover', anchorOver);
			eventAdd(thumbs[j], 'focus', anchorOver);
			// parent should be the anchor, disable clicking
			eventAdd(thumbs[j].parentNode, 'click', eventPrevent);
		}
	}
	
})(document);

Code (markup):

I use data attributes to pre-store data from the SCRIPTING so we aren't constantly running element lookups inside the loop. I trap the image and not the anchor as some browsers will report the content as e.target instead of the anchor it's supposed to, I added a 'current' class at the start when href and src match, as well as on change so you can highlight the selected one as desired (I used an opacity trick as it's simple).

As I just wrote it, that SHOULD work all the way back to IE 5.x, despite being HALF the code you had with that jQuery train wreck and not needing the fat bloated library and DESPITE even having a small set of helper functions in place! THAT'S why I generally consider jQuery to be 100% grade A farm fresh bull. Well, just one of the many reasons...

I tossed a live demo of that up here:
http://www.cutcodedown.com/for_others/VanceVP/

I also disabled click-through on the anchors, since really clicking on them is for scripting OFF behavior, and ALT text is copied over from the thumb to the larger image. Remember, ALT is NOT optional!!!

Hope this helps.

 

Thanks so much, Jason.

I have no answers for your questions. I found an example that more or less did what I was trying to do and tried to use it as a learning tool. Why it was done the way it was done is beyond me. Since I don't know anything about JS, I went looking for an example to work with. Guess it was a bad example.

I see what you did with the CSS and HTML and it is pretty simple. My problem was with JS. Not knowing anything about it, I was curious as to whether this could be done with just HTML and CSS, but I couldn't find anything along those lines. I also see that placement of the script (<script src= . . .> plays an intricate role in how all of this works.

Anyway, your suggestion worked like a charm (as if there was any doubt), but I would still like an opinion as to whether going this route - with the extra mouseover images - really adds any value to the page/content. Is it personal preference or is this the norm now for pages selling something?

Thanks again for all the suggestions . . .

Happy Holidays!!!!