Thumbnail Anchor Problem

Discussion in 'Web Design and Development' started by Teleportable, Dec 7, 2012.

  1. Teleportable macrumors newbie

    Oct 31, 2012
    Hey guys-

    This is my first website ever, so go easy on me... I'm having trouble with an anchor linked to a div within the same page of a fluid design.

    Here's a link to the site:

    In the first content panel (Campaign), the first image (model with the white rimmed sunglasses) is linked to the div where the image is displayed in full size. I've used the "Set text of Container" tag behavior to load the image in the div. The anchor isn't important in the full sized display, but when you resize the window to tablet or mobile sizes, the full sized imagecontainer drops to the bottom of the accordion, and I'd like a click on the thumbnail to take the viewer to the full sized image below, but my anchor doesn't seem to work.

    This is the code I'm using:

    The anchor seems to work when I remove the "Set text of container behavior", but unfortunately, I don't know any other way to load the full size image in the div.

    any ideas on how I might be able to fix this? Thanks in advance!!
  2. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    Don't use anchor, replace with div, the MM_setTextOfLayer() function is triggered by an onclick already and better cross browser support using a div as the target container.

    Best guess based on your code (untested):

    <div id="thumbnail"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">')"></div>
    <div id="imagecontainer"></div>
    On a side note, is this an Adobe or DreamWeaver function, i.e. the old MacroMedia IDE? I am not a fan, it uses complex means to do simple things in my opinion. I am an advocate of learning jQuery which is an open source, popular but VERY stable and well supported Javascript framework which is very cross-browser compatible and strict DOM based. This means better than what you're using. Look into it and plugins from folks to handle advanced image zooming, etc. but easy to code with sensible functions and arguments. download the library and install so you can do things like this and it just works:

    <a href="#" onclick="$('#two').html('haha, changed content!');return false;">Change Content</a>
    Placed in a script.js - it's good to use an external script file than do it inline, far easier to edit or re-edit, i.e. this quick down and dirty untested script:

    $("div#thumbnail").click(function () {
      $(div#fullsize).html( "<img src='/path/to/fullsized_image.gif' class='large_pics' />");
    Get the idea? When div with ID thumbnail is clicked use the html function to replace another div named fullsize with a image with class large_pics. Then just add your styles to your CSS stylesheet for the ID's and class, keep everything separate as it's best practice to separate code from styling.

    Hope this helps you (and maybe others following) as to different approaches - I'm sure someone here might add a straight DOM method as well, but this user is very new so the friendly naming conventions and support for jQuery is why I chose not to do that.
  3. Teleportable thread starter macrumors newbie

    Oct 31, 2012
    Ahh! So much to learn lol Thank you so much for taking the time!

    I'm not sure if the function is Adobe or MacroMedia, but I'm obviously not the biggest fan either LOL. I have been trying to wrap my head around JQuery, but its been a bit overwhelming. I will keep at it for sure.

    With respects to the thumbnails on my website, are the suggestions you listed above three separate approaches or are they all dependent on each other? I'm still having trouble applying them to my page. I tried to first use the div as a target container, but clicking on the thumbnail didn't scroll the page to the larger image when clicking on it (in the tablet, mobile views) the way a regular anchor should.

    As for the jquery code you suggested, do I apply that script to every individual thumbnail? Or is it a one time thing? I'm just still not sure where the code should go. :confused:

    Sorry to be a pain.
  4. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    My first code example was an untested guess fix to accomplish your goal, try changing "LayoutDiv2" to "imagecontainer" and adjust your CSS as well to use the latter. Looks like I forgot to do that! The other two examples are concepts of alternative approaches with the key being your're *not* using the MM stuff!!! I included both inline and external (advised) examples.

    The foundation you need is a basic understanding of how functions work with arguments passed to it, and of course how CSS works especially selectors, classes and ID's. jQuery merges it all together, basically.

    Download the core library as per the documentation then create a file holding the jQuery code (example: script.js) and link it as instructed in the head section just like you would link any Javascript file. Your HTML will also include the thumbnail image wrapped in a div container and of course the empty div container where you want the full version to show, each with id or class so jQuery can find each in its selector and apply the method(s).

    Relax, it takes time to grasp all this and don't hesitate to ask questions. But now is the time to do some research on your own, start with the jQuery documentation and a few examples, see what it does, the lightbulb will go on after a few attempts.
  5. Teleportable thread starter macrumors newbie

    Oct 31, 2012
    You are so awesome! Thank you! I am on it! Really, truly, appreciate your guidance and patience!!!


Share This Page