How to position thumbnails created by Expando

**jimchicago** · 09-25-2009, 05:59 PM

Hi, this is my first-ever post on the DD forum. After some trial and error I managed to get Expando working for me . . . but the instructions on the page
http://www.dynamicdrive.com/dynamici...pandoimage.htm

don't seem to tell me how I can position (on my web page) the thumbnails that Expando generates. I'm sure it's just a bit of extra HTML code, but I definitely need it.

For now all my thumbnails are in the upper-left corner of the page . . . which is where I want to place a logo. How can I get each thumbnail exactly where I want it on the page? THANK YOU

**simcomedia** · 09-25-2009, 10:24 PM

Ummm, that would be by inserting them into your HTML where you want them to reside. There's no special 'positioning' instructions. They could go into separate table cells (if you're using tables) or into a wrapper <div> then lined up left to right, top to bottom, etc. etc.

**jscheuer1** · 09-26-2009, 02:08 AM

Originally Posted by simcomedia

Ummm, that would be by inserting them into your HTML where you want them to reside. There's no special 'positioning' instructions. They could go into separate table cells (if you're using tables) or into a wrapper <div> then lined up left to right, top to bottom, etc. etc.

Basically correct. I would just like to add that for more information (possibly more than you want), one can look here:

http://www.dynamicdrive.com/forums/s...ad.php?t=40871

Bear in mind though that this is a reference to an old thread. Link(s) have been removed, and there is an evolution in the thread. So if you are really interested in learning from it, read it all before drawing any conclusions. There is however (at this typing) a solid link near the end to an example of the code being used in the 'real world'. To wit:

http://www.rubescartoons.com/

@jimchicago,

If you want more help, reply here and include a link to a live page on your site (or elsewhere - it doesn't have to be working particularly well, or at all) where you have the script and some content at least that will give us a good idea of what you are attempting to do. In other words - a demo of what the problem is.

**jimchicago** · 09-28-2009, 05:16 PM

John and sim, thanks for your replies, but: I think my question is simpler, and my HTML knowledge more limited, than you might realize.

On the DD site page linked in my first post, the "gallery" with the four thumbnails (3 shots of Amsterdam and the leaping cat below them) is nicely positioned near the middle of the page. That's exactly what I want to do with Expando on the page I'm creating, which you can see at http://www.joiedesfleurs.com/dynamic.html.

I'm using the BlueVoda site builder (from Vodahost), which allows me to enter HTML code into six different sections of the page: Start of Page, Between Head Tag, Inside Body, Beginning of Body, End of Body, End of Page (BlueVoda also lets me edit HTML in a more traditional, "view all code" view). Right now in the Between Head Tag section have the "boilerplate" code for Expando:

<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

<script type="text/javascript" src="expando.js">

/* Expando Image Script ©2008 John Davenport Scheuer

Should I revise this code (maybe the "vertical-align" value?) in order to place the gallery farther down on the page? I'd really like to be able to position the upper-left corner of the gallery at a specific pixel location. Can I do that, and if so, exactly what code should I type in where? I have not used <div> tags before, so maybe I need a tutorial on how to use them. Thank you.

**jscheuer1** · 09-28-2009, 08:46 PM

Using a text only editor (like NotePad), copy and paste the below code exactly to either overwrite your existing page or to create a new one in the same folder:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

<script type="text/javascript" src="expando.js">

/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

</script>
</head>
<body bgcolor="#7B7BC0" text="#000000">
<div id="bv_Text2" style="width: 775px; height: 53px; margin: 0 auto; text-align: center;">
<font style="font-size:13px" color="#FFFFFF" face="Arial">HERE IS SOME TEXT THAT I WANT TO POSITION </font><font style="font-size:19px" color="#FFFFFF" face="Arial"><b>ABOVE</b> </font><font style="font-size:13px" color="#FFFFFF" face="Arial">THE ROW OF THUMBNAILS GENERATED BY EXPANDO<br>
<br>
</font></div>
<div style="height: 75px; margin: 0 auto; text-align: center;">
<img class="expando" border="0" src="0476_0013.jpg" width="100" height="75" alt="">
<img class="expando" border="0" src="0499_0021.jpg" width="100" height="75" alt="">
<img class="expando" border="0" src="doutzen.jpg" width="100" height="75" alt="">
<img class="expando" border="0" src="0493_0009.jpg" width="100" height="75" alt="">
</div>

</body>
</html>

**jimchicago** · 09-29-2009, 10:35 PM

Thanks for all that code, John, but because I'm so used to my page-builder program's WYSIWYG, drag-and-drop-each-page-element interface, I decided not to use your code. Instead, I created another "test" page with Expando on it:
http://www.joiedesfleurs.com/alternative.html

But this time I used my page builder's drag-and-drop tool for placing HTML right where I want it on the page (don't know why I had forgotten about that tool, but glad I remembered). In that drag-and-drop I placed the following image-specific code (after placing the Expando "boilerplate" code in between the <head> tags):

<p>
<img class="expando" border="0" src="0476_0013.jpg" width="100" height="75">
<img class="expando" border="0" src="0499_0021.jpg" width="100" height="75">
<img class="expando" border="0" src="doutzen.jpg" width="100" height="75">
<img class="expando" border="0" src="0493_0009.jpg" width="100" height="75">
<img class="expando" border="0" src="0497_0006.jpg" width="100" height="75">
</p>

And just like that, I'm able to move the row of thumbnails generated by Expando to wherever I want it on the page. Only problem is, it's now a VERTICAL row of thumbnails, and I'd much rather have them in a horizontal row.

Can you tell me how to tweak the HTML so the thumbnails will be horizontal row? THANKS.

**jscheuer1** · 09-30-2009, 01:00 PM

Change your style to (additions/changes red):

Code:

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

#bv_Html1 {
width: auto!important;
}

**jimchicago** · 09-30-2009, 03:21 PM

Thanks, John, that worked! Kind of surprising that the row would go horizontal by inserting the word "vertical" into the code in place of "horizontal." I'm just glad it works.

Now, what if I have a horizontal row of thumbnails and I want to split it into two separate rows?

**jscheuer1** · 09-30-2009, 03:37 PM

You can try using the <br> tag or simply make two separate rows. I'm not sure of the best approach or if it matters, one of these will probably work. I would favor two separate rows if it works. There could even be other ways. The difficulty I'm having is that I would never code the page as your editor has in the first place, so it is hard for me to visualize the consequences in advance for any specific code change/addition.

As to the horizontal vs. vertical - there is no horizontal-align property, so that statement simply removed that style (which was there in the first place to help keep the mouse on the image during expansion). The way the page was styled when I looked at it last, it is the width of the container that either constricts the images to a vertical orientation or (as happened after my change) allows them to expand freely with no restriction in the horizontal direction.

Thread: How to position thumbnails created by Expando

Thread Tools

Search Thread

How to position thumbnails created by Expando

Bookmarks

Bookmarks

Posting Permissions