choice43015
12-14-2008, 01:56 AM
Hello I am new here.
I am also new to JS
and I am trying to enlarge an image in it's own pop up window.
you can see in my gallery page here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Collectible Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="books.js">
</script>
<script type="text/javascript" src="bookstore1.js">
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="index.html">the Collecter</a></h1>
<h2><a href="index5.html" title="Member Login">Member Login</a> | <a href="index7.html" title="Register">Register</a></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="index.html"accesskey="1" title="">Collect</a></li>
<li><a href="index2.html" accesskey="2" title="">Figures</a></li>
<li><a href="index3.html" accesskey="3" title="">Fantasy</a></li>
<li><a href="index4.html" accesskey="4" title="">posters</a></li>
<li><a href="index5.html" accesskey="5" title="">Members</a></li>
</ul>
</div>
</div>
<hr />
<div id="page">
<div id="bg">
<div id="content">
<div class="post" style="padding-top: 57px;">
<h2 class="title">Collectible BUY AND SELL!</h2>
<script type="text/javascript">
document.write("<b>" + Date() + ".</b>")
</script>
<script type="text/javascript" src="Platform.js">
</script>
<div class="entry">
<p align="center">
<script type="text/javascript" src="bookstore2.js">
</script>
</p>
<a href="javascript:void%20window.open('window1.html','popup1','width=420,height=420,top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0');">
</div>
<!-- end page -->
<div id="footer">
<p>(c) 2008 the collecter.com. All rights reserved.</p>
</div>
</body>
</html>
here is my bookstore2.js code
// check for quantities
createBookDB();
if (total_ordered > 0)
{
document.writeln('<a href=index6.html>' + 'view shopping cart</a>');
}
else
{
document.writeln('Shopping cart is empty.');
}
document.writeln('<hr>');
// create the online catalog
for (var n = 0; n < bookDB.length; n ++ )
{
document.writeln('<table width="500">');
document.writeln('<td align="left" height="200" width="156">');
document.writeln('<a href="javascript:void%20window.open(\'' + bookDB[n].number + '\')">');
document.writeln('<img src="' + bookDB[n].imageSrc + '" border="0" ' +
'alt="' + bookDB[n].title + '"></td></a>');
document.writeln('<td><b>' + bookDB[n].title + '</b><br />');
document.writeln('ISBN Number: ' + bookDB[n].number + '<br />');
document.writeln('<i>' + 'Price CAN $' + bookDB[n].price + '</i><br />');
document.writeln('<a href="javascript:addBook(\'' +
bookDB[n].number + '\')">' + '<img src="images / buy.gif" alt="buy" width="50" border="0" height="50" /></a><br /></a></td>');
document.write('</td></tr></table>');
}
and my books.js code
// This file creates common functions for the shopcart.htm
// and bookstore.htm pages
// create two variables
var bookDB = new Array();
var total_ordered = 0;
// create the book object
function book(title, number, price, quantity, lgeImg)
{
this.title = title;
this.number = number;
this.price = price;
this.quantity = quantity;
this.imageSrc = "images/" + number + ".jpg";
this.lgeImageSrc = "images/" + lgeImg + ".jpg";
}
// assign the book information to the book database array
function createBookDB()
{
bookDB[0] = new book("", "01s", 54.99, 0, "01l");
bookDB[1] = new book("", "02s", 14.95, 0, "02l");
bookDB[2] = new book("", "03s", 38.99, 0, "03l");
bookDB[3] = new book("", "04s", 35.99, 0, "04l");
bookDB[4] = new book("", "05s", 32.99, 0, "05l");
bookDB[5] = new book("A ring to bring fortune ", "06s", 48.95, 0, "06l");
bookDB[6] = new book("A fountin in the forest ", "07s", 35.99, 0, "07l");
bookDB[7] = new book("Stones from lore", "08s", 62.95, 0, "08l");
bookDB[8] = new book("rings of old", "09s", 31.99, 0, "09l");
bookDB[9] = new book(" arcane designs", "10s", 63.00, 0, "10l");
checkQuantity();
}
// check quantity function
function checkQuantity()
{
var ordersCookie = findOrder("orders");
if ( ! ordersCookie)
{
return
}
var userOrders = ordersCookie.split("+");
for (var n = 0; n < userOrders.length; n ++ )
{
var orderNum = userOrders[n];
bookDB[n].quantity = orderNum;
if (orderNum > 0)
{
total_ordered ++ ;
}
}
}
// find order function
function findOrder(findName)
{
var entireCookie;
var cookieName;
var cookieValue;
var cookieArray = document.cookie.split("; ");
for (var n = 0; n < cookieArray.length; n ++ )
{
entireCookie = cookieArray[n].split("=");
cookieName = entireCookie[0];
cookieValue = entireCookie[1];
if (cookieName == findName)
{
return unescape(cookieValue);
}
}
return null;
}
I have everything working on this site except the image enlarged through JS code.
any advice would be appreciated.
Thanks
I am also new to JS
and I am trying to enlarge an image in it's own pop up window.
you can see in my gallery page here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Collectible Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="books.js">
</script>
<script type="text/javascript" src="bookstore1.js">
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="index.html">the Collecter</a></h1>
<h2><a href="index5.html" title="Member Login">Member Login</a> | <a href="index7.html" title="Register">Register</a></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="index.html"accesskey="1" title="">Collect</a></li>
<li><a href="index2.html" accesskey="2" title="">Figures</a></li>
<li><a href="index3.html" accesskey="3" title="">Fantasy</a></li>
<li><a href="index4.html" accesskey="4" title="">posters</a></li>
<li><a href="index5.html" accesskey="5" title="">Members</a></li>
</ul>
</div>
</div>
<hr />
<div id="page">
<div id="bg">
<div id="content">
<div class="post" style="padding-top: 57px;">
<h2 class="title">Collectible BUY AND SELL!</h2>
<script type="text/javascript">
document.write("<b>" + Date() + ".</b>")
</script>
<script type="text/javascript" src="Platform.js">
</script>
<div class="entry">
<p align="center">
<script type="text/javascript" src="bookstore2.js">
</script>
</p>
<a href="javascript:void%20window.open('window1.html','popup1','width=420,height=420,top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0');">
</div>
<!-- end page -->
<div id="footer">
<p>(c) 2008 the collecter.com. All rights reserved.</p>
</div>
</body>
</html>
here is my bookstore2.js code
// check for quantities
createBookDB();
if (total_ordered > 0)
{
document.writeln('<a href=index6.html>' + 'view shopping cart</a>');
}
else
{
document.writeln('Shopping cart is empty.');
}
document.writeln('<hr>');
// create the online catalog
for (var n = 0; n < bookDB.length; n ++ )
{
document.writeln('<table width="500">');
document.writeln('<td align="left" height="200" width="156">');
document.writeln('<a href="javascript:void%20window.open(\'' + bookDB[n].number + '\')">');
document.writeln('<img src="' + bookDB[n].imageSrc + '" border="0" ' +
'alt="' + bookDB[n].title + '"></td></a>');
document.writeln('<td><b>' + bookDB[n].title + '</b><br />');
document.writeln('ISBN Number: ' + bookDB[n].number + '<br />');
document.writeln('<i>' + 'Price CAN $' + bookDB[n].price + '</i><br />');
document.writeln('<a href="javascript:addBook(\'' +
bookDB[n].number + '\')">' + '<img src="images / buy.gif" alt="buy" width="50" border="0" height="50" /></a><br /></a></td>');
document.write('</td></tr></table>');
}
and my books.js code
// This file creates common functions for the shopcart.htm
// and bookstore.htm pages
// create two variables
var bookDB = new Array();
var total_ordered = 0;
// create the book object
function book(title, number, price, quantity, lgeImg)
{
this.title = title;
this.number = number;
this.price = price;
this.quantity = quantity;
this.imageSrc = "images/" + number + ".jpg";
this.lgeImageSrc = "images/" + lgeImg + ".jpg";
}
// assign the book information to the book database array
function createBookDB()
{
bookDB[0] = new book("", "01s", 54.99, 0, "01l");
bookDB[1] = new book("", "02s", 14.95, 0, "02l");
bookDB[2] = new book("", "03s", 38.99, 0, "03l");
bookDB[3] = new book("", "04s", 35.99, 0, "04l");
bookDB[4] = new book("", "05s", 32.99, 0, "05l");
bookDB[5] = new book("A ring to bring fortune ", "06s", 48.95, 0, "06l");
bookDB[6] = new book("A fountin in the forest ", "07s", 35.99, 0, "07l");
bookDB[7] = new book("Stones from lore", "08s", 62.95, 0, "08l");
bookDB[8] = new book("rings of old", "09s", 31.99, 0, "09l");
bookDB[9] = new book(" arcane designs", "10s", 63.00, 0, "10l");
checkQuantity();
}
// check quantity function
function checkQuantity()
{
var ordersCookie = findOrder("orders");
if ( ! ordersCookie)
{
return
}
var userOrders = ordersCookie.split("+");
for (var n = 0; n < userOrders.length; n ++ )
{
var orderNum = userOrders[n];
bookDB[n].quantity = orderNum;
if (orderNum > 0)
{
total_ordered ++ ;
}
}
}
// find order function
function findOrder(findName)
{
var entireCookie;
var cookieName;
var cookieValue;
var cookieArray = document.cookie.split("; ");
for (var n = 0; n < cookieArray.length; n ++ )
{
entireCookie = cookieArray[n].split("=");
cookieName = entireCookie[0];
cookieValue = entireCookie[1];
if (cookieName == findName)
{
return unescape(cookieValue);
}
}
return null;
}
I have everything working on this site except the image enlarged through JS code.
any advice would be appreciated.
Thanks