Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

Jose Cuervo: Aug 25, 2004

I have a personal website that I wanted to post my travel pictures on. Instead of making a slidehow I thought it would be easier to just have all the pictures as thumbnails and then have the user click on a picture they wanted to see. The picture clicked on would then display in a larger size.

I found this website that has a zoom feature that does exactly what I want. Unfortunately I do not know how to make the javascript work. I have tried downloading the mootools file and the script file from the website, but I do not know where to put the variable declaration (var myZoomer = new ByZoomer(options)

on my page and what exactly it does since I do not see it being used anywhere.

Any help would be appreciated.

# ¿ Sep 6, 2009 19:02

Adbot: ADBOT LOVES YOU

# ¿ May 3, 2024 22:45

Jose Cuervo: Aug 25, 2004

Outlaw Programmer posted:

You can see where they initialize their object in this separate .js file.

To use it, it looks like you mark some elements in your HTML with a class name or ID. After the document is finished loading, you create their ByZoomer object and pass it this identifier. It will crawl over the document and discover the element you want and then work its magic.

This is what I have on the page I am trying to get this to work on:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />

<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/mootools-more.js"></script>
<script type="text/javascript" src="js/byzoomer_min.js"></script>
<script type="text/javascript" src="js/byzoomer_demo.js"></script>
</head>

<body> 
<div id="container"> 
     <div id="content-container"> 
          <a href="chess.jpg" title="Optional title" class="byzoomer">
               <img src="chess-tiny.jpg" />
          </a>
     </div> 
</div> 
</body>
</html>

I downloaded the four js files and placed them in my www folder and things work just fine now. One quick question though. In the byzoomer_demo.js file it looks like all I need from there is the initialization of the object (new ByZoomer()

. Is there any way for me to make this initialization happen by writing the code in my webpage (say in the <head> section?

Thanks for the help thus far.

Jose Cuervo fucked around with this message at 03:15 on Sep 7, 2009

# ¿ Sep 7, 2009 01:05

Jose Cuervo: Aug 25, 2004

Kilson posted:

You can just put something similar to this:
code:
<script type="text/javascript">
 var zoomer = new ByZoomer();
</script>

Hmm, that does not seem to work. It does not matter too much though. My next question is as follows:

On the website he says you can define the following css rule:

div#byzoomerTitle: to style the title of large images (appear at the top of the image).

How would I use this to have a title appear at the top of my images when zoomed in?

# ¿ Sep 7, 2009 13:05

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.