Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 7, 2012, 02:01 AM   #1
Teleportable
macrumors newbie
 
Join Date: Oct 2012
Thumbnail Anchor Problem

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:
http://www.solaimanfazel.com/linked

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:

Quote:
<a href="#imagecontainer"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' &lt;img src=&quot;images/Galleries/Campaign/SolaimanFazelCampaign014.jpg&quot; alt=&quot;Solaiman Fazel Satine Boutique Mod&quot; border=&quot;1&quot; id=&quot;imageborder&quot;&gt;')"></a>

<a id="imagecontainer"></a>
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!!
Teleportable is offline   0 Reply With Quote
Old Dec 7, 2012, 08:50 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: 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):

Code:
<div id="thumbnail"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' &lt;img src=&quot;images/Galleries/Campaign/SolaimanFazelCampaign014.jpg&quot; alt=&quot;Solaiman Fazel Satine Boutique Mod&quot; border=&quot;1&quot; id=&quot;imageborder&quot;&gt;')"></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.

http://jquery.com/ download the library and install so you can do things like this and it just works:

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

Code:
<script>
$("div#thumbnail").click(function () {
  $(div#fullsize).html( "<img src='/path/to/fullsized_image.gif' class='large_pics' />");
});
</script>
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Dec 7, 2012, 11:28 PM   #3
Teleportable
Thread Starter
macrumors newbie
 
Join Date: Oct 2012
Quote:
Originally Posted by SrWebDeveloper View Post
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):

Code:
<div id="thumbnail"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' &lt;img src=&quot;images/Galleries/Campaign/SolaimanFazelCampaign014.jpg&quot; alt=&quot;Solaiman Fazel Satine Boutique Mod&quot; border=&quot;1&quot; id=&quot;imageborder&quot;&gt;')"></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.

http://jquery.com/ download the library and install so you can do things like this and it just works:

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

Code:
<script>
$("div#thumbnail").click(function () {
  $(div#fullsize).html( "<img src='/path/to/fullsized_image.gif' class='large_pics' />");
});
</script>
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.
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.

Sorry to be a pain.
Teleportable is offline   0 Reply With Quote
Old Dec 8, 2012, 12:01 AM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: 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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Dec 8, 2012, 12:22 AM   #5
Teleportable
Thread Starter
macrumors newbie
 
Join Date: Oct 2012
Quote:
Originally Posted by SrWebDeveloper View Post
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.
You are so awesome! Thank you! I am on it! Really, truly, appreciate your guidance and patience!!!

cheers!
Teleportable is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
HTML and anchor links jent Web Design and Development 6 Nov 29, 2013 12:04 PM
Thumbnail problem dazzw Mac Basics and Help 0 May 24, 2013 06:13 AM
iPhone 5 camera roll thumbnail problem help! Ronny220 iOS 6 4 May 9, 2013 04:53 PM
Chinese Anchor Baby Mansion in California likemyorbs Politics, Religion, Social Issues 9 Dec 6, 2012 11:51 PM
Anchor Tag Navigation Styling - Need Help thinkpatience Web Design and Development 8 Jul 7, 2012 07:25 PM

Forum Jump

All times are GMT -5. The time now is 06:56 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC