how to change thumbs location of text with <a href Featured Image Zoome/Multi-Zoom

[jlt206]

1) Script Title: Featured Image Zoome w/Multi-Zoom

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: Currently any text enclosed by the <a href surrounding the thumbs image, only appears below the image.

In my case, I am just using this text as the image links instead of using an image. So the text ends up below the line of normal text, instead on the same line.

Thanks!

J

[vwphillips]

<h3>Demo 3:</h3>

<div class="multizoom1 thumbs">
 this is some text <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" data-large="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" data-title="Milla Jojovitch">tom</a>
 this is some text <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" data-lens="false" data-magsize="150,150" data-large="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" data-title="Saleen S7 Twin Turbo">joe</a>
</div>
<div class="targetarea" style="border:1px solid #eee"><img id="multizoom1" alt="zoomable" title="" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"/></div>
<div id="description">Milla Jojovitch</div>

i used this mark up and the links are inline with the text

please post a link to your page

[jscheuer1]

I'm not sure I understand. You need an image to zoom on. If you mean the thumbnails, if I substitute text here:

                <div class="multizoom1 thumbs">
                  <a href="millasmall.jpg" data-large="milla.jpg" data-title="Milla Jojovitch">
                    <img src="milla_tmb.jpg" alt="Milla" title="">
                  </a>
                  <a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo">
                    <img src="saleen_tmb.jpg" alt="Saleen" title="">
                  </a>
                  <a href="haydensmall.jpg" data-large="hayden.jpg" data-title="Hayden Panettiere">
                    <img src="hayden_tmb.jpg" alt="Hayden" title="">
                  </a>
                  <a href="jaguarsmall.jpg" data-large="jaguar.jpg" data-title="Jaguar Type E">
                    <img src="jaguar_tmb.jpg" alt="Jaguar" title="">
                  </a>
                </div>

So That I have:

                <div class="multizoom1 thumbs">
                  <a href="millasmall.jpg" data-large="milla.jpg" data-title="Milla Jojovitch">
                    Milla
                  </a>
                  <a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo">
                    Saleen
                  </a>
                  <a href="haydensmall.jpg" data-large="hayden.jpg" data-title="Hayden Panettiere">
                    Hayden
                  </a>
                  <a href="jaguarsmall.jpg" data-large="jaguar.jpg" data-title="Jaguar Type E">
                    Jaguar
                  </a>
                </div>

Everything works out OK.

I can even add dividers to get a nicer look:

                <div class="multizoom1 thumbs">
                  <a href="millasmall.jpg" data-large="milla.jpg" data-title="Milla Jojovitch">
                    Milla
                  </a> | 
                  <a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo">
                    Saleen
                  </a> | 
                  <a href="haydensmall.jpg" data-large="hayden.jpg" data-title="Hayden Panettiere">
                    Hayden
                  </a> | 
                  <a href="jaguarsmall.jpg" data-large="jaguar.jpg" data-title="Jaguar Type E">
                    Jaguar
                  </a>
                </div>

You could probably even format/style that section further using HTML and/or CSS.

The multizoom.css file has:

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
	padding-top: 25px;
	width: 325px;
	text-align: center;
}

You might want to reduce or eliminate that.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[jlt206]

Hi,

Thanks for the help.

I changed the .css file, removed the padding-top tag and that helped. The problem occurred with an <h2> Tag I placed, so I changed it out to a <p> tag with a style and that seems to work fine. I need the text to be a certain size 24px bold, but it seems to still drop the text lower. I'm thinking it could be something else affecting it in another .css file or an html tag, unrelated to this code. I'm going to dig a around a bit more to see where it is.

Thanks! J

[jscheuer1]

Instead of p try div. The p tag has default top and bottom margins, div doesn't.