All Thumbs Hover Blowup

LeDude

Some title eh?

The closest thing I could find to what I'd like was in the "Pimp Your Ride" thread. Therein, hovering over a thumbnail places a larger image into a designated location.

Has anyone come up with a way to have an "All Thumbs" layout wherein the viewer, when hovering over a thumbnail, is shows a blow-up (medium) of that same picture? This would be a way to more expediently browse a large group of photos, I think, and would entail the blown-up version being 'placed' (or, hovering) over the root thumbnail pic.

LeDude

So I'm thinking this will require javascripting, so it may need to be moved to the 'other' forum.

Along those lines, I'm thinking about the process... css would call up a javascript for 'hover' (over pictures? I don't know the tag for this) in the "all thumbs" galleries. The javascript would need to pull the name of the current photo, truncate whatever ending designates 'thumbnail' (-T?) and replace it with "-M" (or, "-M.jpg"), and set the display area (I think). Am I on the right track? I'm probably missing a lot, but I'm trying to think this through completely before attempting to write any code.

ivar

LeDude wrote:

So I'm thinking this will erquire javascripting, so it may need to be moved to the 'other' forum.

Along those lines, I'm thinking about the process... css would call up a javascript for 'hover' (over pictures? I don't know the tag for this) in the "all thumbs" galleries. The javascript would need to pull the name of the current photo, truncate whatever ending designates 'thumbnail' (-T?) and replace it with "-M" (or, "-M.jpg"), and set the display area (I think). Am I on the right track? I'm probably missing a lot, but I'm trying to think this through completely before attempting to write any code.

Remember CSS doesn't "call" anything, it just styles, so there is no way that CSS code can call for a javascript function ( i think ), you can do it in html. I have no idea if it is possible, it will be a hack for sure.

bwg

LeDude wrote:

So I'm thinking this will erquire javascripting, so it may need to be moved to the 'other' forum.

Along those lines, I'm thinking about the process... css would call up a javascript for 'hover' (over pictures? I don't know the tag for this) in the "all thumbs" galleries. The javascript would need to pull the name of the current photo, truncate whatever ending designates 'thumbnail' (-T?) and replace it with "-M" (or, "-M.jpg"), and set the display area (I think). Am I on the right track? I'm probably missing a lot, but I'm trying to think this through completely before attempting to write any code.

you are on exactly the right track.

pat.kane

LeDude wrote:

... This would be a way to more expediently browse a large group of photos...

LeDude, good luck with this task as I think this would be a great addition to the All Thumbs style. I know it is something I'd implement on my site.

LeDude

pat.kane wrote:

LeDude, good luck with this task as I think this would be a great addition to the All Thumbs style. I know it is something I'd implement on my site.

I'm pretty slow to figure these things out, but I at least I see a light at the end of the tunnel here... check out this site for what I'm looking at right now: LINK

bwg

LeDude wrote:

I'm pretty slow to figure these things out, but I at least I see a light at the end of the tunnel here... check out this site for what I'm looking at right now: LINK

that's not gonna work

1) you'll need access to the html...which you dont have
2) you'd need the thumbnails to be the ultimate size you wanted to display, which they're not

you're gonna need to do a straight up javascript hack to get this working.

LeDude

bigwebguy wrote:

that's not gonna work...
you're gonna need to do a straight up javascript hack to get this working.

yes... I've discovered that now... it does function within an html only page... but it is not integrated with the All Thumbs, so it could be created manually this way I suppose, but that would be ridiculous.

alright, atleast I'm learning now

oh yes... and if there's anyone who wants to display images and have them blown up all within a photo or gallery description, I can describe how... let me know (its basically a copy-paste from this page

thanks for the help,
Rich

LeDude

Now this is hot.

LeDude

<*script>
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var w=1
var h=1

if (document.getElementById || document.all)
document.write('
')

function gettrailobj()
{
if (document.getElementById) return document.getElementById("trailimageid").style
else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
document.onmousemove=""
document.getElementById('ttimg').src='img/s.gif'
gettrailobj().visibility="hidden"
gettrailobj().left=-1000
gettrailobj().top=0
}


function showtrail(width,height,file)
{
if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
{
w=width
h=height

// followmouse()

gettrailobj().visibility="visible"
gettrailobj().width=w+"px"
gettrailobj().height=h+"px"
document.getElementById('ttimg').src=file
document.onmousemove=followmouse
}
}


function followmouse(e)
{

if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
{

var xcoord=20
var ycoord=20

if (typeof e != "undefined")
{
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)

if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;

gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}

}
<*/script>
<*img onmouseover="showtrail(200,300,'largeimage.gif');" onmouseout="hidetrail();" src="smallimage.gif" width="67" height="100" style="padding-top:10px;" />

---

" Just change the showtrail() arguments to your own image's height, width and name."

So I'm a big cheater and found this here. But, cheater that I am, I'm a little uncertain as to how to implement it in Smugmug... little help?

If the above quote is correct, then all I need is the javascript portion that creates variables with these values actively. In other words, I need the code that returns the h, w & n of the image over which the user is hovering.

LeDude

What command will get me an image's properties? I need the width, height and url. A secondary question: I am assuming this will be done onMouseOver... is there a preferable method (e.g. onLoad)?

devbobo

Hey LeDude,

I have started some work on this hack. Currently, it's only working properly on IE with Th or Ti images,

Check it out on my website below.

Cheers,

David

ivar

devbobo wrote:

Hey LeDude,

I have started some work on this hack. Currently, it's only working properly on IE with Th or Ti images,

Check it out on my website below.

Cheers,

David

SUWEEET excellent job David

Andy

ivar wrote:

SUWEEET excellent job David

Dev is da devoboboBOMB!

rainforest1155

devbobo wrote:

Hey LeDude,

I have started some work on this hack. Currently, it's only working properly on IE with Th or Ti images,

For some reason it doesn't work very good in Maxthon, which uses the IE engine - the script seems to crash after successfully hovering a few times over the photos.
Works in plain IE, but only if you don't scroll the page down! When you scroll just a little it doesn't work until you go to the top of the page.

Great job so far,
Sebastian

devbobo

rainforest1155 wrote:

Works in plain IE, but only if you don't scroll the page down! When you scroll just a little it doesn't work until you go to the top of the page.

i know there is some issues, i really haven't had a chance to have a close look at the code.

LeDude

devbobo wrote:

i know there is some issues, i really haven't had a chance to have a close look at the code.

devbobo, Andy is right, you is da devboboBomB! I am spending some time to look closely at your code...can't say I'm gonna be much help debugging, but I will learn quickly on this app; so, a double thanks!

-LeDude

LeDude

devbobo wrote:

i know there is some issues, i really haven't had a chance to have a close look at the code.

oh yes... and in my research so far I have read about folks having to deal with the whole z-axis thing differently for IE and other browsers; this was an issue with a CSS version of a pic blowup app

claudermilk

That is very, very cool. Yep, on FF the spacing isn't right. I will be watching this with great interest, I think it's a great idea.

LeDude

devbobo wrote:

Hey LeDude,

I have started some work on this hack. Currently, it's only working properly on IE with Th or Ti images,

Check it out on my website below.

Cheers,

David

cheers mate... it seems to be working much faster now, did you alter the script?

I had broken down the whole thing in notepad (carriage returns, spacing, etc.) to take a closer look... but I don't think I saved it. So, I'm starting over and trying to read through the whole deal. I really appreciate you getting this started. Hopefully, I can learn a bit here and help refine the code.

-LeDude

devbobo

LeDude wrote:

cheers mate... it seems to be working much faster now, did you alter the script?

Hey LeDude,

I was messing around with the code to see if I could get it working in FF. Not sure that it should be faster

David