Snorii
02-27-2003, 11:59 PM
I'm using Christina's fork, and I currently have my images displayed horizontally under the main image. (Just had to change the renderListingsImages function in style.php).
Now what I want to do is use a little JavaScript to change the main pic by clicking on the thumbnails. I have the JavaScript worked out it and it runs fine in html.
Basically, the main image has a name tag added. I changed the renderMainImage function in style.php to accomplish that part. So I added
name=\"mainpic\" in the img src tag.
On each thumbnail is an anchor tag that calls my JavaScript function and passes a parameter to it.
<a href=\"javascript:picchange($count)\">
I am passing count since it is incremented in a while loop. I may have to change this since it starts at zero, but I'll worry about that later.
And I added the JavaScript function into the page
//JavaScript Function to switch images
echo "<SCRIPT Language=\"JAVASCRIPT\">
function picchange(num){
if(document.images){
document.mainpic.src = \"http://mywebsite.com/openrealty/property-images/$mlsNumber-\" + num + \".jpg\";
} else {
document.mainpic.src = \"http://mywebsite.com/openrealty/property-images/$mlsNumber-1.jpg\";
}
}
</SCRIPT>";
The code accepts a parameter (num) and then changes the url for the image. I honestly don't think the way I'm doing it now is the best way. Unforunately, I don't know SQL and I'm having trouble figuring out what to use to change the image.
The normal JavaScript is
<SCRIPT Language="JAVASCRIPT">
function changepic(num){
if(document.images){
document.main.src = "http://.../1-" + num + ".jpg";
} else {
document.main.src = "http://.../1-1.jpg";
}
}
</SCRIPT>
<img src="http://..../1-1.jpg" width="258" height="193" border="1" name="main">
<br> //whatever html code
<a href="javascript:changepic(1)">
<img src="http://.../1-1.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(2)">
<img src="http://.../1-2.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(3)">
<img src="http://.../1-3.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(4)">
<img src="http://.../1-4.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(5)">
<img src="http://.../1-5.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(6)">
<img src="http://.../1-6.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(7)">
<img src="http://.../1-7.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(8)">
<img src="http://.../1-8.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
Basically, the images are stored as an incremented number. But with a database, there should be a way to call the image name and pass that to the JavaScript function as a string.
As always, Thanks for any help in advance.
- Snorii
Now what I want to do is use a little JavaScript to change the main pic by clicking on the thumbnails. I have the JavaScript worked out it and it runs fine in html.
Basically, the main image has a name tag added. I changed the renderMainImage function in style.php to accomplish that part. So I added
name=\"mainpic\" in the img src tag.
On each thumbnail is an anchor tag that calls my JavaScript function and passes a parameter to it.
<a href=\"javascript:picchange($count)\">
I am passing count since it is incremented in a while loop. I may have to change this since it starts at zero, but I'll worry about that later.
And I added the JavaScript function into the page
//JavaScript Function to switch images
echo "<SCRIPT Language=\"JAVASCRIPT\">
function picchange(num){
if(document.images){
document.mainpic.src = \"http://mywebsite.com/openrealty/property-images/$mlsNumber-\" + num + \".jpg\";
} else {
document.mainpic.src = \"http://mywebsite.com/openrealty/property-images/$mlsNumber-1.jpg\";
}
}
</SCRIPT>";
The code accepts a parameter (num) and then changes the url for the image. I honestly don't think the way I'm doing it now is the best way. Unforunately, I don't know SQL and I'm having trouble figuring out what to use to change the image.
The normal JavaScript is
<SCRIPT Language="JAVASCRIPT">
function changepic(num){
if(document.images){
document.main.src = "http://.../1-" + num + ".jpg";
} else {
document.main.src = "http://.../1-1.jpg";
}
}
</SCRIPT>
<img src="http://..../1-1.jpg" width="258" height="193" border="1" name="main">
<br> //whatever html code
<a href="javascript:changepic(1)">
<img src="http://.../1-1.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(2)">
<img src="http://.../1-2.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(3)">
<img src="http://.../1-3.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(4)">
<img src="http://.../1-4.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(5)">
<img src="http://.../1-5.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(6)">
<img src="http://.../1-6.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(7)">
<img src="http://.../1-7.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
<a href="javascript:changepic(8)">
<img src="http://.../1-8.jpg" width="54" height="37" border="0"></a>&nbsp;&nbsp;
Basically, the images are stored as an incremented number. But with a database, there should be a way to call the image name and pass that to the JavaScript function as a string.
As always, Thanks for any help in advance.
- Snorii