Integrating "SLIDESHOW" with Luis Borruel HTML?

[storybookweddings]

With Javascript now disabled on PBASE, has anyone figured out a way to get the Luis Borruel style sheet to work with the new SLIDESHOW function ?

Thanks in advance.
Ray

[shariwb]

I am waiting for this also.

[yardbird]

Check this link
http://forum.pbase.com/viewtopic.php?t=32091

Cheers
Karthik

[dang]

UPDATED:
Yes...
I've fixed it for my buddy Karen, and might make improvements after speaking more with her. It's pretty straight forward from what I'd used originally. You can see it here:
http://www.pbase.com/kleaf

Below is the coding, which should help, since the generated HTML viewed with your editor isn't the same as you add in the description area. Also note this is a "splash" page, and doesn't include the gallery thumbnails beneath. You can add the original section of code back to the end if you want them.
Good luck,
tom

Code: Select all


HTML for gallery description:

<p align= "left"><img src="http://www.pbase.com/kleaf/image/80285960/original.jpg" alt="logo">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="800">

  <tbody>

<tr>

    <td align="left" height="10" valign="bottom"><img src="http://www.pbase.com/image/56552555/original.jpg"></td></tr>

  <tr>

    <td><img src="http://www.pbase.com/image/56552555/original.jpg" height="1"></td></tr>

  <tr>


</tr><tr>

    <td colspan="3" valign="bottom"><!--- menu starts here --->

            <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 set="yes" linkindex="11" href="http://www.pbase.com/kleaf/profile"><h3>Profile</h3></a></td>

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

               <td><a set="yes" linkindex="12" href="http://www.pbase.com/kleaf/pad"><h3>PaD</h3></a></td>

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

<td><a set="yes" linkindex="13" href="http://www.pbase.com/kleaf/main_gallery"><h3>All Galleries</h3>  </a> </td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>

               <td><a linkindex="14" href="http://feeds.pbase.com/feeds/kleaf/photos.atom"><h3>RSS</h3>  </a> </td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>

<td><a linkindex="14" href="mailto:karen@karenleaf.com"><h3>Email</h3>  </a> </td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>

                <td><a linkindex="15" href="http://upload.pbase.com/edit_gallery/kleaf/root"><h3>Edit</h3></a></td>

                <td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
                   
                </tr></tbody></table></td></tr><!--- menu ends here --->

  <tr>

      <td valign="top">

            <div style="background-image:

            <img id="imgid" src="http://www.pbase.com/image/56552555/original.jpg"><table id="inline_slideshow" style="width: 500px; height: 366px;" cellpadding="0" cellspacing="0">
    <tbody><tr><td style="text-align: center; vertical-align: middle;">
        SLIDESHOW(80285948, 80285952, 80285953, 80285954, 80300018, size=medium, delay=3, loop=yes)
    </td></tr>
</tbody></table>

</div></td>

      <td><img src="http://www.pbase.com/image/56552555/original.jpg" width="15"> </td>


      <td bgcolor="#0f0f0f" valign="top"><!--- right column --->

       <table border="0" cellpadding="2" cellspacing="0">

        <tbody>

        <tr>

          <td>

            <p><br><p align="center">
<a linkindex="16" href="http://www.karenleaf.com"><img src="http://www.pbase.com/kleaf/image/80285962/original.jpg"></a></p><p></p><p align="center"><a linkindex="17" href="http://www.karenleaf.com/photocart/">Client Proofs</a></p><p>Pbase is a place for experimenting, learning, having fun and meeting people both virtually and in reality. My Photo a Day (PaD) gallery, has been a pre-blog diary of sorts.<br>For my professional offerings, including wedding, &amp; portrait photography please visit my site via the links above. I embrace lifestyle documentation, and welcome the chance to speak with you. Based in Connecticut, I look at home as a jumping off place to explore new places or revisit old haunts.<br>
Thank you, Karen</p>
           
            </p></td></tr></tbody></table></td><!--- end right column --->


</tr>
<tr>
<td colspan="5" align="center">
<p>Content "Copy Written" www.KarenLeaf.com <br>Credits: Luis Borruel-(nostromo), Elated PageKits, Oochappen pbase page, www.cryer.co.uk and www.brainerror.net<br><a linkindex="18" href="http://www.pbase.com/"><img src="http://www.pbase.com/kleaf/image/80298549/original.jpg"></a>
<br>
</p></td></tr><!--- end elated credit---></tbody></table></center>
<br
=======================================================================
CSS for style sheet:

A {
   COLOR:  #CFCBC2; TEXT-DECORATION: none
}
A:link {
   COLOR:  #BFBFBF; TEXT-DECORATION: underline
}
A:visited {
   COLOR:  #CFCBC2; TEXT-DECORATION: none
}
A:active {
   COLOR:  #BFBFBF; TEXT-DECORATION: none
}
A:hover {
   COLOR:  #CFCBC2; TEXT-DECORATION: bold
}
A.thumbnail {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
   DISPLAY: block; BACKGROUND:  #260000;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  #000000 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  #000000 1px solid; HEIGHT: 197px
}
A.thumbnail:link {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
   DISPLAY: block; BACKGROUND:  #260000;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  #000000 1px solid;
   WIDTH: 172px; PADDING-TOP: 5px; BORDER-BOTTOM:  #000000 1px solid; HEIGHT: 197px
}
A.thumbnail:visited {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
   DISPLAY: block; BACKGROUND:  #260000;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  #000000 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  #000000 1px solid; HEIGHT: 197px
}
A.thumbnail:active {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
   DISPLAY: block; BACKGROUND:  #260000;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  #000000 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  #000000 1px solid; HEIGHT: 197px
}
A.thumbnail:hover {
   BORDER-RIGHT:  #BFBFBF 1px solid; BORDER-TOP:  #BFBFBF 1px solid;
   DISPLAY: block; BACKGROUND:  #240000;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  #BFBFBF 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  #BFBFBF 1px solid; HEIGHT: 197px
}
BODY {
   MARGIN-TOP: 0px; BACKGROUND:  #000000; MARGIN-BOTTOM: 20px
}
DIV {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 10px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
TH {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
TR {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
TABLE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: -27px; MARGIN-BOTTOM: 7px;
    FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
TABLE.luis {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
    FONT: 10px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
LI {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
UL {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
FORM {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
BLOCKQUOTE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
P {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #AFAFAF; BORDER-BOTTOM: 0px
}
B {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
I {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
CENTER {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  #DFDFDF; BORDER-BOTTOM: 0px
}
FONT {
   DISPLAY: block; FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
    MARGIN-LEFT: 4px; WIDTH: 170px; COLOR:  #DFDFDF; MARGIN-RIGHT: 4px;
     LETTER-SPACING: 0px
}
H3 {
   FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND:  #000000;
    PADDING-BOTTOM: 8px; BORDER-LEFT: 0px; COLOR:  #CFCBC2;
     LINE-HEIGHT: normal; PADDING-TOP: 8px; FONT-STYLE: normal;
      LETTER-SPACING: 0px; TEXT-ALIGN: center; FONT-VARIANT: normal
}
IMG {
   BORDER-RIGHT:  #000000 1px; BORDER-TOP:  #000000 1px;
   BORDER-LEFT:  #000000 1px; BORDER-BOTTOM:  #000000 1px
}
IMG.thumbnail {
   BORDER-RIGHT:  #000000 1px solid; PADDING-RIGHT: 0px;
    BORDER-TOP:  #000000 1px solid; PADDING-LEFT: 0px;
    BACKGROUND:  #320000; PADDING-BOTTOM: 0px; MARGIN: 0px;
    VERTICAL-ALIGN: middle; BORDER-LEFT:  #000000 1px solid;
    PADDING-TOP: 0px; BORDER-BOTTOM:  #000000 1px solid
}
INPUT {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
    BORDER-LEFT:  #000000 1px solid; BORDER-BOTTOM:  #000000 1px solid
}
TABLE.thumbnail {
   WIDTH: 10%
}
TD {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px;
   BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: 1px;
   BORDER-BOTTOM: 1px; BORDER-COLLAPSE: collapse; empty-cells: show
}
TD.message_body {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px; DISPLAY: block; BACKGROUND:  #000000;
    BORDER-LEFT: 1px; BORDER-BOTTOM:  #000000 1px dotted
}
.caption {
   COLOR:  #BFBFBF; FONT-STYLE: italic
}
.display {
   BORDER-RIGHT:  #000000 1px solid; BORDER-TOP:  #000000 1px solid;
    BACKGROUND:  #000000;
    FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=6);
    BORDER-LEFT:  #000000 1px solid; BORDER-BOTTOM:  #000000 1px solid
}
.lid {
   BACKGROUND:  #CFCFCF00; FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR:  #000000; TEXT-DECORATION: none
}
.message_body {
   MARGIN: 5px 5px 10px;
   FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR:  #DFDFDF
}
.sb {
   BACKGROUND:  #000000; FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR:  #CFCBC2; TEXT-DECORATION: bold
}
BODY {
   MARGIN-TOP: 0px; TOP: 0px
}
BODY {


}
BODY TABLE A IMG {
   DISPLAY: inline
}
HR {
   POSITION: relative
}

[storybookweddings]

Thats just perfect, many thanks.

I tried it myself and got some so so results, but my borderd and mergins were all over the place.


Thanks again,

Ray

[cspbcn]

Thanks Tom, After 1 hour working with your code and adding a extra gif to make space, I really don't know anything about html code and the slide was on top of the links, I managed to do something similar to my original Luis type gallery
many thanks

Carles

http://www.pbase.com/cspbcn

[dang]

Glad it helped. I should point out that there's a "built in spacer toward the top in this section of code:

Code: Select all

  <tbody>

<tr>

    <td align="left" height="10" valign="bottom"><img src="http://www.pbase.com/image/56552555/original.jpg"></td></tr>

  <tr>

Just increase the height, and it should help align. For some reason, it works differently in some root galleries than others. Probably since I'm not a great coder, and I'm sure there's plenty of flaws. But at least it gives a starting point.

[sufi_star]

Its not working for me ......please help !!!!!




Sufi
http://effectsofpheromones.supersized.org/

[storybookweddings]

I noticed a glitch your page that I have also.
The first line of text in the right column is cut off at the top.
This happened to me when I removed the hyper link to the web site.

I looking for a fix and will let you know if I get one.

Ray

Thanks Tom, After 1 hour working with your code and adding a extra gif to make space, I really don't know anything about html code and the slide was on top of the links, I managed to do something similar to my original Luis type gallery
many thanks

Carles

http://www.pbase.com/cspbcn

[dang]

Hey,
I'm glad it's given enough to work around. It's made to use a medium size photo to keep the page viewable for people still using 600 x 800 resolution. If you still have problems using medium, it can still occur.
The fix is simple though (when using medium)... You probably removed too much code when taking out the gif link. Just add a paragraph and/or breaks back to the top where the link was for spacing:

Code: Select all

<p>   OR   <br><br>

As I said before, you'll need to do adjustments depending on your page. This was a quick fix to get the "Luis" style page back up for those wanting to tinker, and not a total re-write. Be careful making sure the link table doesn't go over your top logo in lower screen resolutions. You might need to add breaks there too, depending on the size of it. I just found it when going back to check the sheet for Karen at 600X800, and thought I'd mention it. I've only checked it with Firefox, and IE. So I haven't a clue how other browsers will read it. But hopefully there will be more sheets being added to the Wiki, and members banks soon, so keep checking the forum. Arjun & others have added some great tips in the original News thread here: http://forum.pbase.com/viewtopic.php?t=32091&start=75


Hope this helps.

[alinla]

Thanks Tom. I used you're changes and applied them to my page. It now looks pretty much the way it used to with Luis' script.

The new official slideshow feature looks nice (and is way overdue IMO) but I don't like the forced medium size since I've always used a larger size for my slideshow.

Thanks again.

[dang]

Alina,
Actually, you can use any size you want to! All you need to do is make the original the size you need and use it instead. My concern when working on the page was specific because I wanted to be sure people viewing with low resolutions of 600 x 800 monitors wouldn't need to scroll a lot. But if you add larger photos, you'll need to rework the spacing problems. It would probably be easier just to make a new style instead. Or, at least for me, it would at this point. Be sure and check the News Forum for some good tips and examples people have already fixed.

[lastingimpressions2002]

I'm sorry for maybe asking the same question..but I am really not good with the HTML coding.

I also had the slideshow in my "weddings" gallery and it just recetly just stopped. Is there something I can do to fix the problem and get the slideshow working again?

Any help would be appreaciated.

Thanks,
Mindy

[dang]

It's due to pbase having to disable all java because of security. If you'll read through this thread, I've already added coding which I used to get it working again with the new feature pbase made available as a replacement. If you installed the Luis code to begin with, you can change it over without too much difficulty.

[koalamountain]

Hi experts,
need help. I used the above code but instead of the pictures the text beginning with "SLIDESHOW(............ " appears in the box.
Can not find my mistake. Who has an idea.
Regards
from Germany
Rolf