Confused on proper image reference syntax
Posted: Sun Apr 06, 2008 9:12 pmI'm trying to get a slide show inserted as a gallery header. I started with code from another gallery (http://www.pbase.com/gommalacca/love_for_the_sea). My challenge is that the image references are in a syntax that I don't recognize and don't know how to access.... or my CSS is messed up. Help!
As an example, this works and I have no idea how to figure out where to grab this syntax.
{url: '/g3/20/423820/3/95056660.Eq9nwacY.jpg'}
This does not work, and I can't figure out why it doesn't work...
{url: '/devonshire/image/38996105.jpg'}
This doesn't work either; I got this from right mouse clicking on the displayed image and copying the "Properties" definition of the image, then I deleted the "http://i.pbase.com" portion of the description per syntax from the gallery that works.
{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'}
I was trying to replace the base code's image references with my own references and it doesn't work. As you can see I don't know much about CSS. I think it is looking for this syntax: getElementsByTagName, which I'm taking to be the displayed image's syntax as noted above.
Here is the code that I have so far. Any help is appreciated.
<html lang="en-US"><head>
<title>~Pacific Coast</title>
<link rel="stylesheet" type="text/css" href="http://i.pbase.com/styles/gallery2.css">
<link rel="stylesheet" type="text/css" href="http://css.pbase.com/styles/110128.css">
<base href="http://www.pbase.com">
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/ajaxRequestObject.js"></script>
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/ajaxVote.js"></script>
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/common.js"></script>
</b>
</td>
</tr>
</table>
<DIV id="page-1">
<h2>~My Local Coast~</h2><DIV class="galleryheader">
<!-- BEGIN user desc -->
A collection of images from along the pacific coast and places inland<br>
These are the results of a personal challenge I took on to embrace the places around where I live<br>
What I discovered is that there are images everywhere<br> and the limitations are of our own making.<br>
So this is a quest to assume nothing and to see with new eyes<br><br>
<center><!--
THE OFFICIAL PBASE SLIDESHOW
Learn how to make a slideshow for your own galleries:
http://www.pbase.com/help/slideshow
-->
<style type="text/css">
#inline_slideshow {
width: 400px;
height: 405px;
}
#inline_slideshow * {
text-align: center;
vertical-align: middle;
}
</style>
<table id="inline_slideshow" cellpadding="0" cellspacing="0">
<tr><td>
<a href="http://www.pbase.com/image/95051199"><img src="http://www.pbase.com/image/95003695.jpg" style="border: none;" /></a>
</td></tr>
</table>
<script type="text/javascript">
if (document.getElementById && document.getElementsByTagName) {
var delay = 5000; // image display time
var fade_time = 300; // time an image spends fading
var fade_speed = 24; // time between each grade of the fade process
var loop = true; // whether or not to restart slideshow on end
var host = 'http://i.pbase.com';
var images = [{url: '/o6/07/12807/1/95003042.BnCsgJY5.03302008CoastZ036.jpg'},{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'},{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'},{url: '/g3/20/423820/3/95056660.Eq9nwacY.jpg'},{url: '/g3/20/423820/3/95056701.WrDTAq7C.jpg'},{url: '/g3/20/423820/3/95056750.L8SzFjqc.jpg'}];
var index = 0;
var count = 0;
var increment = Math.round((1 / (fade_time / fade_speed)) * 100) / 100;
var image_node = get('inline_slideshow').getElementsByTagName('img')[0];
var image_anchor_node = get('inline_slideshow').getElementsByTagName('a')[0];
var ImageLoader;
load_next_image();
}
else {
document.write('Slideshow cannot start because your browser is out of date.');
}
function load_next_image() {
if (index + 1 == images.length) count++;
index = (index + 1 == images.length) ? 0 : index + 1;
ImageLoader = new Image;
ImageLoader.src = host + images[index].url;
if (ImageLoader.complete) {
hold_image();
}
else {
ImageLoader.onload = function() {hold_image();};
ImageLoader.onerror = function() {load_next_image();};
}
}
function hold_image() {
if (count >= 1 && !loop) return;
setTimeout('fade_out()', delay);
}
function fade_out(value) {
value = (value == null) ? 1 : value;
if (value > 0) {
value -= increment;
value = Math.round(value * 100) / 100;
set_opacity(image_node, value);
setTimeout('fade_out(' + value + ')', fade_speed);
}
else {
set_opacity(image_node, 0);
show_loaded_image();
}
}
function show_loaded_image() {
image_node.src = host + images[index].url;
image_node.style.width = ImageLoader.width;
image_node.style.height = ImageLoader.height;
if (image_anchor_node) {
var id = images[index].url;
id = id.substring(id.lastIndexOf('/') + 1, id.indexOf('.'));
image_anchor_node.href = 'http://www.pbase.com/image/' + id;
}
fade_in();
}
function fade_in(value) {
value = (value == null) ? 0 : value;
if (value < 1) {
value += increment;
value = Math.round(value * 100) / 100;
set_opacity(image_node, value);
setTimeout('fade_in(' + value + ')', fade_speed);
}
else {
set_opacity(image_node, 1);
load_next_image();
}
}
</script>
</center>
<h4>When my sense of self fades to nothing and I am utterly transparent, I begin to really see</h4>
<!-- END user desc -->
As an example, this works and I have no idea how to figure out where to grab this syntax.
{url: '/g3/20/423820/3/95056660.Eq9nwacY.jpg'}
This does not work, and I can't figure out why it doesn't work...
{url: '/devonshire/image/38996105.jpg'}
This doesn't work either; I got this from right mouse clicking on the displayed image and copying the "Properties" definition of the image, then I deleted the "http://i.pbase.com" portion of the description per syntax from the gallery that works.
{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'}
I was trying to replace the base code's image references with my own references and it doesn't work. As you can see I don't know much about CSS. I think it is looking for this syntax: getElementsByTagName, which I'm taking to be the displayed image's syntax as noted above.
Here is the code that I have so far. Any help is appreciated.
<html lang="en-US"><head>
<title>~Pacific Coast</title>
<link rel="stylesheet" type="text/css" href="http://i.pbase.com/styles/gallery2.css">
<link rel="stylesheet" type="text/css" href="http://css.pbase.com/styles/110128.css">
<base href="http://www.pbase.com">
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/ajaxRequestObject.js"></script>
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/ajaxVote.js"></script>
<script language="JavaScript" type="text/javascript" src="http://i.pbase.com/js/common.js"></script>
</b>
</td>
</tr>
</table>
<DIV id="page-1">
<h2>~My Local Coast~</h2><DIV class="galleryheader">
<!-- BEGIN user desc -->
A collection of images from along the pacific coast and places inland<br>
These are the results of a personal challenge I took on to embrace the places around where I live<br>
What I discovered is that there are images everywhere<br> and the limitations are of our own making.<br>
So this is a quest to assume nothing and to see with new eyes<br><br>
<center><!--
THE OFFICIAL PBASE SLIDESHOW
Learn how to make a slideshow for your own galleries:
http://www.pbase.com/help/slideshow
-->
<style type="text/css">
#inline_slideshow {
width: 400px;
height: 405px;
}
#inline_slideshow * {
text-align: center;
vertical-align: middle;
}
</style>
<table id="inline_slideshow" cellpadding="0" cellspacing="0">
<tr><td>
<a href="http://www.pbase.com/image/95051199"><img src="http://www.pbase.com/image/95003695.jpg" style="border: none;" /></a>
</td></tr>
</table>
<script type="text/javascript">
if (document.getElementById && document.getElementsByTagName) {
var delay = 5000; // image display time
var fade_time = 300; // time an image spends fading
var fade_speed = 24; // time between each grade of the fade process
var loop = true; // whether or not to restart slideshow on end
var host = 'http://i.pbase.com';
var images = [{url: '/o6/07/12807/1/95003042.BnCsgJY5.03302008CoastZ036.jpg'},{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'},{url: '/o6/07/12807/1/95003695.HnriG19p.03302008CoastZ118.jpg'},{url: '/g3/20/423820/3/95056660.Eq9nwacY.jpg'},{url: '/g3/20/423820/3/95056701.WrDTAq7C.jpg'},{url: '/g3/20/423820/3/95056750.L8SzFjqc.jpg'}];
var index = 0;
var count = 0;
var increment = Math.round((1 / (fade_time / fade_speed)) * 100) / 100;
var image_node = get('inline_slideshow').getElementsByTagName('img')[0];
var image_anchor_node = get('inline_slideshow').getElementsByTagName('a')[0];
var ImageLoader;
load_next_image();
}
else {
document.write('Slideshow cannot start because your browser is out of date.');
}
function load_next_image() {
if (index + 1 == images.length) count++;
index = (index + 1 == images.length) ? 0 : index + 1;
ImageLoader = new Image;
ImageLoader.src = host + images[index].url;
if (ImageLoader.complete) {
hold_image();
}
else {
ImageLoader.onload = function() {hold_image();};
ImageLoader.onerror = function() {load_next_image();};
}
}
function hold_image() {
if (count >= 1 && !loop) return;
setTimeout('fade_out()', delay);
}
function fade_out(value) {
value = (value == null) ? 1 : value;
if (value > 0) {
value -= increment;
value = Math.round(value * 100) / 100;
set_opacity(image_node, value);
setTimeout('fade_out(' + value + ')', fade_speed);
}
else {
set_opacity(image_node, 0);
show_loaded_image();
}
}
function show_loaded_image() {
image_node.src = host + images[index].url;
image_node.style.width = ImageLoader.width;
image_node.style.height = ImageLoader.height;
if (image_anchor_node) {
var id = images[index].url;
id = id.substring(id.lastIndexOf('/') + 1, id.indexOf('.'));
image_anchor_node.href = 'http://www.pbase.com/image/' + id;
}
fade_in();
}
function fade_in(value) {
value = (value == null) ? 0 : value;
if (value < 1) {
value += increment;
value = Math.round(value * 100) / 100;
set_opacity(image_node, value);
setTimeout('fade_in(' + value + ')', fade_speed);
}
else {
set_opacity(image_node, 1);
load_next_image();
}
}
</script>
</center>
<h4>When my sense of self fades to nothing and I am utterly transparent, I begin to really see</h4>
<!-- END user desc -->