new feature: slideshow function *UPDATED 7/16*

[flemmingbo]

Thanks Andrys

http://www.pbase.com/sheila

New snaps of England and France http://www.pbase.com/sheila/france_2007 and http://www.pbase.com/sheila/england_2007

Cheers
Sheila

Hi Sheila,

So that's where you've been , I was wondering a bit why you hadn't posted for a while - I'll be sure to check out all your new gorgeous shots!

I had a quick look at your page, the problem must lie in the SLIDESHOW(galleryname) code 'cos the javascript on your page hasn't found the gallery with your images - there are no image links in the script. Be sure to use the gallery name and not the title.

Will you copy the SLIDESHOW code from your gallery description and then paste it here, then we can hopefully see what's causing this.

regards, Flemming

[andrys]

Thanks Andrys

http://www.pbase.com/sheila

Probably actually will be better to just post the
edit_gallery user-description box contents for the
slideshow line.

In looking at the source code from running the page,
there's no width designation as there normally is,
since it hasn't found the first image for some reason.

Also, the URL for the first image is missing the
Image ID for the same reason. Doesn't know where it is.

The slide-show gallery has to be like this -- for example,
if your slideshow gallery's "gallery name" (not title) is
"slides" then your statement will be
SLIDESHOW(slides)

That will default to medium size and 5 seconds.
Most of us don't want the large size, BUT if we wanted
large, with 3 second delay, we'd say
SLIDESHOW(slides,size=large,delay=3)

No spaces between 'slideshow' in caps and the "("

New snaps of England and France http://www.pbase.com/sheila/france_2007 and http://www.pbase.com/sheila/england_2007

Wow, they're ready that quickly! You must have some
set of Actions!

Will go explore after I get some sleep

[mboimare]

Even if this slideshow feature makes things easier, it definitely doesn’t make them more flexible.
I understand how helpful it can be for a lot of people.
However I chose Pbase because of the flexibility in using Java Scripts in terms of customization.
For me, it's just adding limitations (especially in size).
It really sucks!
Maybe it will evolve!

[sheila]

Thanks all. I have the slide show working now (made a new gallery called slides and it works). But it won't work with my usual stylesheet possibly because I have suppressed the PBase header. Perhaps you could suggest which part of this I should delete so I can use this stylesheet but also suppressing the PBase header.

BODY,LI,UL,
BLOCKQUOTE,P,I,H1,H3,H4,H5 {
font-family: verdana,helvetica,sans-serif;
font-size: 10pt;
color : #888888;
background : black;
}

A:link { color : #606060}
A:active { color : #606060}
A:visited { color : #606060}
A:hover { color : #202020}

TD {
background : none;
}

#linkedsubgalleries {
font-size: 10pt;
}
#linkedsubgalleries A:hover {
font-style: normal;
}

TABLE.comment {
background : #E0E0E0;
font-family: verdana,helvetica,sans-serif;
font-size: 15pt;
color : #000000;
}

TD.thumbnail {
vertical-align : middle;
background : #000000;
min-width : 160px;
height : 160px;
}

IMG.thumbnail {
border-style : solid;
cell-spacing : 30;
border-width : 3pt;
border-color : #FFFFFF;
}

DIV.thumbnails.b {
background : #FFFFFF;
}

TD.display {
vertical-align : middle;
background : #000000;
}
TABLE.imagetable {
background : #000000;
border-style : solid;
border-width : 30pt;
border-color : #000000;
}

IMG.display {
border-style : solid;
border-width : 6pt;
border-color : #FFFFFF;
}

SPAN.date { color : #FFFFFF; }

SPAN.artist { color : #FFFFFF; }

h2 {
font-family : papyrus;
font-size: 25pt;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
padding-top: 15px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: -10px;
background : #FFFFFF;
color : red
}


DIV.galleryheader {
width : 100%;
margin-right : auto;
margin-left : auto;
border-style : solid;
border-width : 4pt;
border-color : #FFFFCC;
text-align : left;
font-size : 12pt;
}


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
body table td a img{
display:none
}
.thumbnails table img{
display:none
}

table img{
display:block
}
.display,.display img{
display:block
}
.thumbnails table,.thumbnails table img, .display,p.small{
display:inline
}

Thanks all.

Cheers
Sheila

[andrys]

Sheila, I'm using the same stylesheet I had for Luis' layout but I
somewhat simplified the edit-gallery description box part for this new
pbase slideshow. Maybe you can use the below style on a test page
with your old stylesheet for Luis' layout.

I did my spacing for the old 500-pixel display though.

Can't send the user-description code to you in pmail because pmail
"interprets" the html and you don't show an email for you.

So I'll post a sample table here that is like the Borruel one we used
before, and you can match it against your own gallery description
box to see what the differences might be

There's the usual title logo (though you are using text and for some
reason it breaks the borders at left-right. The title logo is usually a
little graphic banner.

This layout includes the navigation buttons Luis laid out and then
below that, the slideshow table (no borders) plus text on the right, but
I've put all these into a percentage-width table instead of an 800 pixel
one that we used before.

=================== Sample ====================
<center><br>

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

<!-- Your menu of navigation options or buttons -->
<!----- The "56552555/original.jpg" is a column spacer -----!>
<TABLE width=90% align="center" cellpadding=0 cellspacing=6 border=0>
<TR align=middle>
<TD><A href="http://www.pbase.com/sheila/profile"><h3>Profile</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/sheila/guestbook"><h3>Guestbook</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/sheila/root&view=recent"><h3>Recent</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/sheila/{yourgalleries}"><h3>To Main Galleries</h3></A></TD>
</TR>
</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=90% cellpadding=24 cellspacing=0 border=0>
<tr valign="top">
<td width=60% align=left><br><br>SLIDESHOW(slides, size=original, delay=3)
<br>Any words you want to add under the slide window in that column
<br>
Any other words there
</td>
<!-- end the SLIDES column -->

<!-- start SLIDESHOW TEXT column on right -->
<td width=40% valign="top">Welcome! &nbsp;Paragraph 1 blah blah<p>
Paragraph 2 blah blah <p>
Paragraph 3 blah blah
</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>Whatever subtitle you want over your thumbnails</b>.<p>
Blah blah<p>
Blah blah
</td>
</tr>
</table>
</center>
</<br><br>

[flemmingbo]

Thanks all. I have the slide show working now (made a new gallery called slides and it works). But it won't work with my usual stylesheet possibly because I have suppressed the PBase header. Perhaps you could suggest which part of this I should delete so I can use this stylesheet but also suppressing the PBase header.

Hi Sheila,

I am using Arjuns code for hiding the Pbase menu and it works with the slideshow.

This is Arjuns code, try pasting this into the top of your stylesheet

/* --- simple code to hide the menu -- */
/* -- by arjun -- */
body table td a img { display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table,.thumbnails table img, .display,p.small{
display: inline;}
body div.galleryheader table td a img {display:inline;}


And then you need to delete this part from the last part of your stylesheet:

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
body table td a img{
display:none
}
.thumbnails table img{
display:none
}

table img{
display:block
}
.display,.display img{
display:block
}
.thumbnails table,.thumbnails table img, .display,p.small{
display:inline
}

[sheila]

Thanks Flemmingbo, Arjun and Andrys. I have it almost how I want it with one exception. How do I have the slide image to the left and the text to the right of the slide?

Here's my current stylesheet.

/* --- simple code to hide the menu -- */
/* -- by arjun -- */
body table td a img { display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table,.thumbnails table img, .display,p.small{
display: inline;}
body div.galleryheader table td a img {display:inline;}
BODY,LI,UL,
BLOCKQUOTE,P,I,H1,H3,H4,H5 {
font-family: verdana,helvetica,sans-serif;
font-size: 10pt;
color : #888888;
background : black;
}

A:link { color : #606060}
A:active { color : #606060}
A:visited { color : #606060}
A:hover { color : #202020}

TD {
background : none;
}

#linkedsubgalleries {
font-size: 10pt;
}
#linkedsubgalleries A:hover {
font-style: normal;
}

TABLE.comment {
background : #E0E0E0;
font-family: verdana,helvetica,sans-serif;
font-size: 15pt;
color : #000000;
}

TD.thumbnail {
vertical-align : middle;
background : #000000;
min-width : 160px;
height : 160px;
}

IMG.thumbnail {
border-style : solid;
cell-spacing : 30;
border-width : 3pt;
border-color : #FFFFFF;
}

DIV.thumbnails.b {
background : #FFFFFF;
}

TD.display {
vertical-align : middle;
background : #000000;
}
TABLE.imagetable {
background : #000000;
border-style : solid;
border-width : 30pt;
border-color : #000000;
}

IMG.display {
border-style : solid;
border-width : 6pt;
border-color : #FFFFFF;
}

SPAN.date { color : #FFFFFF; }

SPAN.artist { color : #FFFFFF; }

h2 {
font-family : papyrus;
font-size: 25pt;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
padding-top: 15px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: -10px;
background : #FFFFFF;
color : red
}


DIV.galleryheader {
width : 100%;
margin-right : auto;
margin-left : auto;
border-style : solid;
border-width : 4pt;
border-color : #FFFFCC;
text-align : left;
font-size : 12pt;
}


Also a white border around the image would be nice!!!

Cheers and thanks all

Sheila

[andrys]

Thanks Flemmingbo, Arjun and Andrys. I have it almost how I want it with one exception. How do I have the slide image to the left and the text to the right of the slide?

Sheila, that was in my response. I don't think you've had a chance
to go through the sample section?? with the explanations in it?

I typed HTML that would do what you want in order to emulate the layout
you had before, with Luis' table code. Your name is even in the lines.

I also tested it before posting it.

Included are comments to explain each section (slides vs text columns)

This would go into your user description box in HTML (as it was with
Luis's) and not in the CSS. At least that was how Luis' code did it

But you should make a test gallery to test it, and not use the root for trying it out... Use the stylesheet you did before though.

[sheila]

Hi Andrys

I did try the text in the description area and it did not work. Its probably due to my complete ignorance with CSS!

Cheers
Sheila

[andrys]

Hi Andrys

I did try the text in the description area and it did not work. Its probably due to my complete ignorance with CSS!

Cheers
Sheila

Sheila,

What I sent you was just HTML.

If you want, send me a link to your test page and I can look at it
to see if I can figure out why it didn't work...

- A

[samhail]

Hello -
I love the slideshow feature. I just have a quick question:
How do I get the slideshow to align in the top center of the
gallery page - presently it's located at the top left.

I tried SLIDESHOW(myfavorites,align=center) - nope

Do I have to go in and change the style sheet html or can
I do this in the description box?

Thanks in advance.
Regards-
Charlene Costello

BTW - to Sheila Smart:
Your galleries and images inspired me to try
out photography. You're a true inspiration to a true
beginner!

[dang]

You should be able to add a "table" to center it within your description area, depending on if how you've set up your CSS Style Sheet. If you're using a basic sheet, it should do the trick.

There's numerous threads about using tables through this thread, and in the "HTML & Style Sheet" Forum which you can look for.

[andrys]

Hello -
I love the slideshow feature. I just have a quick question:
How do I get the slideshow to align in the top center of the
gallery page - presently it's located at the top left.

I tried SLIDESHOW(myfavorites,align=center) - nope

Do I have to go in and change the style sheet html or can
I do this in the description box?

Charlene, believe it or not, you just do this:

<center>SLIDESHOW(myfavorites)</center>

[samhail]

Thank you to both Andrys and Dang for your prompt help!

Andrys - I used the </center> thing on both the slideshow
and the text and it's working! Thanks so much for sharing.

Dang - I've had a chance to see some of your other table
html stuff and may give those a try when I'm up to it. I
might want to modify the alexc sheet with slide show in a table
like the http://www.pbase.com/kleaf you recommended in another
thread. Where would I put that code into alexc?

Dang - I also had a chance to read your info on macros. I
have the canon 100mm 2.8 and the kenko converter may be
in my future!

Thanks again to both of you!
Regards-
Charlene Costello

[emmelafoto]

After a bit of experimenting, I am finally happy with my root gallery.

http://www.pbase.com/emmelafoto/root

I didn't change my stylesheet, but put everything in the description box. I am glad that in IE en Firefox the gallery looks pretty much the same.
Thanks for the "slideshow" option. I think it is very useful.
greetings,
Maaike