Results 1 to 5 of 5

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

  1. #1
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    <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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

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

    Code:
                    <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:

    Code:
                    <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:

    Code:
                    <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:

    Code:
    .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.
    Last edited by jscheuer1; 04-06-2013 at 04:05 PM. Reason: add bit about the css file
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 5
    Last Post: 12-06-2012, 12:46 AM
  2. Replies: 1
    Last Post: 01-24-2012, 10:02 AM
  3. Featured Image Zoom documentation
    By greggT in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-13-2011, 11:54 PM
  4. window.location.href
    By surboomer in forum JavaScript
    Replies: 20
    Last Post: 12-04-2009, 08:04 AM
  5. Replies: 1
    Last Post: 08-13-2006, 04:11 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •