Integrating "SLIDESHOW" with Luis Borruel HTML?

[marcjosef]

Try the following *ONLY* on a <i>Test gallery first</i>

Thank you very much! I just used that table code! http://www.pbase.com/flipmarc/vegas_la_vacation

I'm a total noob in CSS and HTML. Been reading a lot of threads in the last few days.

Well, you sure did a nice job. Glad the table wasn't too hard to use!
I like your stylesheet with its long blue, clear banner title.

Thanks! It's a variation from Michael Martin's pineskarthiksheet style sheet. Nothing original. I'm just a hack

[pinemikey]

Thanks! It's a variation from Michael Martin's pineskarthiksheet style sheet. Nothing original. I'm just a hack

Well, I'm just a hack, too. My pineskarthiksheet came from Yardbird. Now, there's some excellent CSS stylings

[tomeven]

I am a newb and wonder if anyone can help with my page. I tried to incorporate the slideshow code into the luis java code, but the slideshow is not aligned. It is probably something simple..

http://www.pbase.com/tomeven

Thanks!

[dang]

You'll just need to add some breaks at the end of the menu code as I've done here:

Code: Select all

</a></td></tr></tbody></table></td></tr><!--- menu ends here --->
<tr> </tr>     
<tr><td valign="top"> <br><br>                  
<!--
   
    THE OFFICIAL PBASE SLIDESHOW

[tomeven]

Thanks, I was afraid it would be so simple. Thanks for the help!

[tommipulkkinen]

All right.. I've got this slideshow working very nice. Still, there is something that goes waaaay beyond my knowing about html..

I have weird empty spaces between the page elements. I have tried all sort of configurations using firefox but no luck.
My test gallery shows the problem. The gap between the name and the buttons is very long as is the one between buttons and the slideshow.

If someone has some quick instructions I would be very grateful..

Tommi
Edit: I just realiced that it may be easier for you to see what's wrong if I insert the code..

<center><br>

<!-- Your title logo IF you have one -->
<TABLE width=60% align="top" cellpadding=2 cellspacing=5 border=0>
<TR>
<TD align="center"><IMG src="http://www.pbase.com/tommipulkkinen/image/71234043.jpg"></TD>
</TR></TABLE>
<!-- End title logo table if you have one-->

<TR>

<TD vAlign=bottom colSpan=3><!--- menu starts here --->

<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=0>

<TBODY>

<TR>


<TD><IMG height=2 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>

<TR align=middle>

<TD><A href="http://www.pbase.com/tommipulkkinen/profile"><h3>Profile</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=5></TD>

<TD><A href="http://www.pbase.com/tommipulkkinen/finnish"><h3>Suomeksi</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=5></TD>

<TD><A href="http://www.pbase.com/tommipulkkinen/all_galleries"><h3>All Our Galleries</h3> </A> </TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=5></TD>


<TD><A href="http://www.pbase.com/tommipulkkinen/guestbook"><h3>Guestbook</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=5></TD>

</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->
</table>
<!-- navigation menu ends here -->

<br> <!-- Double space between menu buttons and slide show area -->

<!-- Begin SLIDESHOW TABLE OF 2 COLUMNS
<!-- Begin SLIDES column -->
<!-- (Our table for OLD, Luis Borruel Slideshow on left plus text on right) -->
<table width=80% cellpadding=10 cellspacing=0 border=0>
<tr valign="top">
<td width=60% align=center><br><br>SLIDESHOW(slides, delay=3)
<br>Any words you want to add under the slide window in that column

</td>
<!-- end the SLIDES column -->

<!-- start SLIDESHOW TEXT column on right -->
<td width=40% valign="middle">Welcome and enjoy our pictures!

Tommi & Katariina


Ps. You can comment individual pictures or galleries - just access the guestbook from above. There's also an option to keep the feedback private so that it does not appear to other guests<p>

</td>
</tr>
<!-- end SLIDESHOW TEXT column -->



<!---The rest of your page statements treated as one wide 'column' or a natural page-->
<td colspan=2 align="center">
<center><!br><!br>
<b>Special thanks to all at PBase forums helping create this page</b>.
</td>
</tr>
</table>
</center>
</<br><br>

[andrys]

I have weird empty spaces between the page elements. I have tried all sort of configurations using firefox but no luck.
My test gallery shows the problem. The gap between the name and the buttons is very long as is the one between buttons and the slideshow.

If someone has some quick instructions I would be very grateful..

Tommi

Tommi, thanks for enclosing your user-description box contents so we
could read it more easily the way things were before you started making
more changes after posting here.

You seem to be working on the page as I write and the buttons aren't
showing up right now so I expect you're working on the Tables and
maybe a table-ending marker is making things not show or something.

I didn't check on what you were doing, but it's important not to
erase a <td> that was there unless you adjust for it being gone now
by making a remaining <td> column "width=2" or something. That's
getting a bit advanced.

Essentially, if you don't understand Luis' code which you're keeping for
layout, leave the <td> in place.

In the meantime, I'm not sure what you are finding amiss in
spacing as we can't see it. I copied what you gave us, into to a notepad
and viewed it in a browser, and the spacing didn't look that bad to me at
all. But the items below should help.

1. The 'original.jpg' is a width spacer and if you don't like the widths
of things being so far apart, make them '1' or '0' instead of '5' or '8'
whichever was there.

2. If you don't like the buttons being so wide apart, then make your
button table width smaller. Right now it's width=800 (pixels)

---- Make it something like " width=600" and it'll make everything
closer together.

3. To decrease space between PBase header things and your banner,
get rid of "<br>" after the "<center" that starts it off.


I realize that's probably pretty confusing but maybe it'll get you started.

[tommipulkkinen]

Tommi, thanks for enclosing your user-description box contents so we
could read it more easily the way things were before you started making
more changes after posting here.

You seem to be working on the page as I write and the buttons aren't
showing up right now so I expect you're working on the Tables and
maybe a table-ending marker is making things not show or something.

I didn't check on what you were doing, but it's important not to
erase a <td> that was there unless you adjust for it being gone now
by making a remaining <td> column "width=2" or something. That's
getting a bit advanced.

Essentially, if you don't understand Luis' code which you're keeping for
layout, leave the <td> in place.

In the meantime, I'm not sure what you are finding amiss in
spacing as we can't see it. I copied what you gave us, into to a notepad
and viewed it in a browser, and the spacing didn't look that bad to me at
all. But the items below should help.

1. The 'original.jpg' is a width spacer and if you don't like the widths
of things being so far apart, make them '1' or '0' instead of '5' or '8'
whichever was there.

2. If you don't like the buttons being so wide apart, then make your
button table width smaller. Right now it's width=800 (pixels)

---- Make it something like " width=600" and it'll make everything
closer together.

3. To decrease space between PBase header things and your banner,
get rid of "<br>" after the "<center" that starts it off.


I realize that's probably pretty confusing but maybe it'll get you started.

Hi Andrys!
Thank you VERY much for your time on this one! I have had some success with css using Firefox but this is a little bit too much for my understanding. I know that should be done just the other way -learning the basics and writing your own code instead of trying to trace someone others ideas and trying to edit that.
Still, that's what I'm trying to do for now. I understand that it is very important to have all the td's and tr's in right place. I may have erased some of those accidentally.

http://www.pbase.com/tommipulkkinen/testi
If you see this page I'm sure you see what I mean with the (vertical) gaps.

Later today I compare the original code to mine and see what's missing. It shouldn't be impossible, I've seen such beautifully designed pages on PBase users!

Thank you again, I'll let you know how it goes! This helped a lot.
Tommi

[dang]

Tommi,
The next step would be to remove much of the extra breaks you have, and be sure you've added the slideshow images properly. To get you started in the proper direction, remove the extras as shown below:

Code: Select all

<div class="galleryheader">
<br><p align="center">
<td align="center"><img src="http://www.pbase.com/tommipulkkinen/image/71234043.jpg"></td>
<br>    <!--- menu starts here --->
                   
<br>                <table class="luis" border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="2"></td></tr>
<tr align="center">
<td><a href="http://www.pbase.com/tommipulkkinen/profile"><h3>Profile</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/tommipulkkinen/finnish"><h3>Suomeksi</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/tommipulkkinen/all_galleries"><h3>All Our Galleries</h3>  </a> </td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/tommipulkkinen/guestbook"><h3>Guestbook</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
</tr></tbody></table><!--- menu ends here ---><br>
<br><table border="0" cellpadding="10" cellspacing="0" width="80%">
<tbody><tr valign="top">
<td align="center" width="60%"><br><br><!--
   
    THE OFFICIAL PBASE SLIDESHOW
   
    Learn how to make a slideshow for your own galleries:
    http://www.pbase.com/help/slideshow
   
-->

<table id="inline_slideshow" cellpadding="0" cellspacing="0">
    <tbody><tr><td>
        <a href="http://www.pbase.com/image/70653779"><img src="http://i.pbase.com/g6/88/655488/3/70653779.9aL2oiQo.jpg" style="border: medium none ; opacity: 1; width: 400px; height: 267px;"></a>
    </td></tr>
</tbody></table>

<script type="text/javascript">
if (document.getElementById && document.getElementsByTagName) {
  var delay = 3000;       // 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: '/g6/88/655488/3/74005400.BxHG5qbs.jpg'},{url: '/g6/88/655488/3/81815155.XQbPgJ1Q.jpg'},{url: '/g6/88/655488/3/70653795.gf11PH7m.jpg'},{url: '/g6/88/655488/3/75810897.fsMsX0eo.jpg'},{url: '/g6/88/655488/3/75810951.uxpwQIx5.jpg'},{url: '/g6/88/655488/3/75810956.DcfjnAoq.jpg'},{url: '/g6/88/655488/3/70653779.9aL2oiQo.jpg'},{url: '/g6/88/655488/3/70653789.NYrk85TB.jpg'},{url: '/g6/88/655488/3/75810892.urKgX47O.jpg'},{url: '/g4/88/655488/3/64891276.N3Yal7on.jpg'},{url: '/g6/88/655488/3/69346284.T00ZZmy4.jpg'},{url: '/g6/88/655488/3/76951872.r3JkE89x.jpg'},{url: '/g6/88/655488/3/81815165.GorbD69v.jpg'},{url: '/g6/88/655488/3/77328006.nm4g5GbZ.jpg'},{url: '/g6/88/655488/3/79380844.Cg3GZYwc.jpg'},{url: '/g6/88/655488/3/77330582.lR7KCCkB.jpg'},{url: '/g6/88/655488/3/68867984.qmneJARf.jpg'},{url: '/g6/88/655488/3/69346990.ON5VelRm.jpg'},{url: '/g6/88/655488/3/70315014.W26zjzbD.jpg'},{url: '/g6/88/655488/3/74005395.0HGwxzFx.jpg'},{url: '/g6/88/655488/3/72937670.4xlfPgnX.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>

<br><br>Any words you want to add under the slide window in that column
<br>
<br></td>
<td valign="middle" width="40%">Welcome and enjoy our pictures!
<br>
<br>Tommi &amp; Katariina
<br>
<br>
<br>Ps. You can comment individual pictures or galleries - just access the guestbook from above. There's also an option to keep the feedback private so that it does not appear to other guests<p>
<br>
<br></p></td>
</tr>
<tr><td colspan="2" align="center">
<br><center>
<br><b>Special thanks to all at PBase forums helping create this page</b>.
<br></center></td>
</tr>
</tbody></table>
<br></center>
<br><!--<br--><br>
<!-- END user desc -->


This will be different than you've added into the description area, since it's what's generated looking with firefox, but should show where you need to remove the extra breaks & tables.
Hope it helps.

[tommipulkkinen]

Dang, I truly appreciate your help and your time you took on my problems! Awesome!!!
I'm on a trip this week but will start trying your instructions on Friday.
Thank you so much!

Tommi

[alexisdc]

just discovered the other night about the new slide show and im just starting to work with it. i like the look of the root gallery that dang wrote and im going to use it. but im still confuse (i have no knowledge in code writing and the first slideshow i made took me a week to work,lol. now that pbase fix the problem. im willing to work my butt again. pls help

dang wrote

Also note this is a "splash" page, and doesn't include the gallery thumbnails beneath

what do you mean by that? where did the galleries go (are they just invisible) and if i dont add the rest of the code (where the thumbnails are and the link for the gallery will work?). should i make a new gallery to contain my main galleries (as sub gallery) and if so how should i make it to work on the link?

and one more thing my table menu is a disaster i cant put the link and the corresponding image on top of each other.
http://www.pbase.com/alexisdc
im in desperate need of your help

[tommipulkkinen]

Hi

First of all, thanks to Dang and Andrys!! I got my page up and running again. I may tweak it a little bit more (maybe change the text and where each row of text ends etc) but the main thing is that now it looks like I want it to. Buttons, header, galleries etc!! I can take it from here but I really needed your help earlier!

To alexisdc,

I added all the code and slideshow to my main page. Of course it is easier first to make a test gallery and tweak it but then I just copied everything to my root. I also have the galleries in it the normal way, see for yourself. So as far as I know you don't have to make another gallery page. I know that some will like it to be that way - to keep the first page more simple and clean looking- but I prefer that the galleries are still there.

Once again, this forum ROCKS!

Brgds,
Tommi