HTML and Style Sheets

Sun Apr 06, 2008 9:12 pm

I'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">

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>
<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>

Sun Apr 06, 2008 9:49 pm

Hi Zane,

You can't use javascript in your html, it's been disabled by Pbase - fortunately they created a slideshow function which is what we're all using now.

In it's simplest form, in your html you simply place a SLIDESHOW(name-of-your-gallery-with-photos-for-the-slideshow) text - Pbase then interprets this and replaces it with the proper script!

Read more about it in this thread: http://forum.pbase.com/viewtopic.php?f= ... 6cda42836d
Thread is a bit long, go to page 5 and find the full explanation from CTstone.

regards,

Flemming

Wed Apr 09, 2008 12:39 am

Hi Flemming,

Thanks for the input; that got me onto the right track. What is amazing here is that by merely typing the following into the description box, it just works!

<div align="center">SLIDESHOW()<br>

I didn't even have to insert the image tags, it automagically inserts them for you. All in all, it's a pretty slick bit of coding on Slug's part.

After inserting that simple line, I checked the source code from my browser and it it generated a version of the code that I pasted above. The Javascript and all the HTML is provided by Pbase's servers.

What I thought was hard is now simple and easy!

Example: http://www.pbase.com/devonshire/the_coast_2005

Cheers

Wed Apr 09, 2008 7:56 am

Hi Zane,

Yeah it's a good function, works really well and does all the javascripting you - I am using it for my front page: http://www.pbase.com/flemmingbo
It was quickly introduced by Pbase last Summer when Pbase disabled all user javascripting, thereby disabling the older manually coded javascripted slideshow function.

Usually you would specify a gallery name in the brackets, but I guess that SLIDESHOW() simply defaults to the gallery the slideshow command is placed in. You can also add parameters for size, delay, link, loop.

Glad it worked for you! And stunning photos as always!

regards,

Flemming

HTML and Style Sheets

Confused on proper image reference syntax

Confused on proper image reference syntax

Re: Confused on proper image reference syntax

Re: Confused on proper image reference syntax

Re: Confused on proper image reference syntax

Who is online