SHOWCASE = slideshow + thumbnails hybrid gallery

oxy8384

I have integrated the allthumbs gallery view with the slideshow hack we've all come to know and love. For lack of a better idea, I refer to it as the showcase. You can download my documentation here and then follow the links therein for all the code. You can view a hidden demo, here.

I have not been able to get a response from Smugmug regarding a general repository for this stuff or if the SmugMug Powers-That-Be would be willing to incorporate my changes into the 'official' slideshow release. For now, I guess I'm assuming all support responsibilities. As a side benefit, my mods also fix a bug in the slideshow that never displays the first image in the gallery.

My changes are very localized (look for my initials, WCR, or any references to my inShowcase variable (used to activate my showcase mods).

If you have any questions, you can post them here or email me.

Bill

cmason

Thanks, this looks comprehensive. However, I can't get the links in your pdf to work, so can see any of the code...

oxy8384

Well, I'm a dope...
Never tested that.

Here are the links (right click and Save these locally or open in a new window):
new CSS
Showcase Javascript
Modified slideshow Javascript

Better?

Bill

iamback

oxy8384 wrote:

Here are the links (right click and Save these locally or open in a new window):
new CSS
Showcase Javascript
Modified slideshow Javascript

Thanks - all downloaded (as well as the PDF) and I'll play with it as soon as I can find the time. (Struggling with other customization issues atm... :)

(At least I've got my random-image PHP script working with suitable protection against hot linking - now I just need to refine it a bit. To be admired (or not) in the header of my still very unfinished SmugMug site.)

oxy8384

'protection against hot linking'?
iamback,
Not sure what you mean by 'hot linking' and if it's something I need to protect myslef against, too... Can you explain, please?

Thanks,

Bill

P.S. I just made an update to my modified slideshow code to allow the thumbnails and slideshow images to be in different galleries and to properly handle changes in the viewer's preferred image size. Se more details, below.

oxy8384

update to slideshow code
I just made a change to my modified slideshow code. The change has to do with the links for clicking on the slideshow image.

Before: I grabbed the link URLs from the thumbnails into an array. I then change the links on the thumbnails to jump the slideshow to that specific image and I use the array of URLs to jump to the single-image page when the user clicks on the slide image. Also, in the single-image view, you can change the default image size for the single image view, but any such change will not be picked up by the showcase page unless you reload the page.

Now: The Thumbnail links are changed as before. But now, the slide image URLs are generated dynamically from info in the slideshow array ssSlides and the getCookie('DefaultSize'). Consequently, the slide image links now reflect any change to the viewer's preferred image default size without reloading the showcase page.

Completely severing the connection between the links for the thumbnails and slideshow images like this now allows you to create a separate gallery of thumbnails. Consequently, you can create thumbnails with sizes different from the SmugMug -Th and -Ti files.

Bill

iamback

oxy8384 wrote:

Not sure what you mean by 'hot linking' and if it's something I need to protect myslef against, too... Can you explain, please?

"Hot linking" is when you link from your site to an image (or other embeddable object) located on another site.

For images living on your SmugMug site you can protect against this by disallowing external linking - but then you can't link to them from your your own blog elsewhere either (unless you use the API to pull the images).

My PHP script uses images in a directory somewhere on the same server the script lives on (they just need to be reachable in the local file system), but protects against such hotlinking by allowing configuration of which referrer domains or URIs are allowed to link to the script; you can also configure what to do when linked to from a not-allowed referrer, or what to do when the browser doesn't pass any referrer information at all. (Apart from that, you can configure a default directory with images, but also accept a query parameter pointing to another directory. But usage of such a parameter also needs more "protection" - I'll need to do more refinements before it's really finished.)

Anyway, it's not just a matter whether external links are allowed or not (as in SM), but you have (will have) very fine-grained control over from where links are possible and whether a non-default directory can be specified or not. You do need a server with PHP support for the script and images - but there is even free hosting available which offers PHP support.

oxy8384 wrote:

P.S. I just made an update to my modified slideshow code to allow the thumbnails and slideshow images to be in different galleries and to properly handle changes in the viewer's preferred image size. Se more details, below.

Sounds great but now I don't know whether I have the latest version or not. I'd suggest you put a version/release and a timestamp in every file and mention current version in your posts.

(Meanwhile, I'll try redownloading.)

oxy8384

Good idea. I'll start versioning from here on out...
...but won't start until I have a new version so as not to require any unnecessary downloads at this point.

vegasphotog

FWIW IMHO your watermarking is way overkill and very distracting.

oxy8384

I agree....

akphotog wrote:

FWIW IMHO your watermarking is way overkill and very distracting.

With SmugMug's built-in watermarking and other image protections, it's probably not useful at all. These images were just copied from my own site where I needed to protect things myself and hadn't discovered a lot of the tricks I know now.

Thanks for the feedback. I'm working on an alternative.

Bill

Skyes Art

Traditional gallery spacing??
Anyone????

I put some code in to change the spacing of my gallery titled "people" in traditional style, and it came out in two strips.. I love the spacing this way and wondered how to add a 3rd and 4rth row etc.... for some reason, it only makes 2 or two and a half rows and I would like it to keep going....
this is the code I have:

.gallery_2221781 #traditional,
.gallery_2221781 #traditional #photos {width:960px;}
.gallery_2221781 #traditional .photo {margin:0; padding:0; width:120px}

for this gallery:

http://skyesart.smugmug.com/gallery/2221781


I just REALLY like the size and spacing so far - it looks like stacked filmstrips, I just need to add more horizontal rows...

Thanks in advance ... any and all help appreciated.

Sky
www.skyesart.com

oxy8384

Not sure why you posted this, here.
You'll probably get a better response if you go back to the forum main listing and 'create a new thread' there, rather than replying to a subject that has nothing to do with your question.

I haven't worked with the traditional gallery view, so I'm not sure I can help. You could try lengthening the #photos element (set height to something huge like 4000px) or try the allthumbs gallery view, instead. I took a quick look at your site and can see a lot of mismatched tags, which could be causing any number of problems now or in the future. It's hard to know what you've changed or what the intent was, so it's hard to know what to recommend.

Good luck,

Bill

Skyes Art

Thanks Bill...
I put this is other places but didn't get feeback....
A new thread is a good idea.

I know I have all kinds of odd tags in there but at this point don't know what works and what doesn't:(
Thanks for your time though- much appreciated.

Sky

oxy8384 wrote:

You'll probably get a better response if you go back to the forum main listing and 'create a new thread' there, rather than replying to a subject that has nothing to do with your question.

I haven't worked with the traditional gallery view, so I'm not sure I can help. You could try lengthening the #photos element (set height to something huge like 4000px) or try the allthumbs gallery view, instead. I took a quick look at your site and can see a lot of mismatched tags, which could be causing any number of problems now or in the future. It's hard to know what you've changed or what the intent was, so it's hard to know what to recommend.

Good luck,

Bill