Collection of javascript customizations

[jfriend]

To make it easier for everyone to find these javascript customizations, here's a list of customizations that I've worked on. If you have questions about specific customizations, please ask them in the thread that discusses that customization. As I work on new customizations, I will attempt to add them here. Others are free to add your own list of customizations you've done to another post if you want to make this thread be the list of user-generated javascript customizations. Here are some that I've worked on over the years.


1) Top of breadcrumb go to galleries page.

Make the top level of the breadcrumb point to the galleries page instead of the slideshow page.



Directions and description here.

2) Change top of breadcrumb to "Home"

Change the top level of your breadcrumb to say "Home" instead of your user name.


Directions and description here.

3) Filmstrip Below

In the filmstrip gallery view, move the filmstrip band from above the galleries to a location below the galleries.


Directions and description here.

4a) Move slideshow button to same line as cart buttons

Particularly useful if you have hidden the breadcrumb, but still want the slideshow button available.


Directions and description here.

4b) Move share button to same line as cart buttons

Particularly useful if you have hidden the breadcrumb, but still want the share button available.


Directions and description here.

5) Add custom items to the Buy menu

Add a link to the overall catalog, to your own custom pricing page or to any page that describes how your sales work (proof delay or anything related to buying).


Directions and description here.

6) Display subcategories and galleries together

By default, Smugmug puts sub-categories in a different display box than galleries. There are times when that is useful, but other times when you really don't want two separate lists of thumbs - you would rather just have one list where some are sub-categories and some are galleries. This script lets you combine the categories and subcategories into the same list.

Categories and Subcategories displayed separately (Smugmug default):


Categories and Subcategories displayed together (after using this script):

Directions and description here.

7) Descriptions for Categories and Sub-categories

Just like galleries have gallery descriptions that show next to the gallery thumb and at the top of the gallery page, you can now have a description for a category or subcategory.

Here's what a category description looks like next to the thumb:


And, here's what the same description looks like on the category page:

Directions and description here.

8) Remove Galleries or Sub-Categories Text from Title

Here's how Smugmug looks like by default:


Here's how it looks after this customization:

Directions and description here.

9) Add a Download Image Button For Viewers to Get Originals

In galleries where you intend to allow your viewers to download original images (friends/family), you can now add a Download Image button that makes it a lot more obvious to the viewer how to do this. This customization works automatically in the galleries where you have originals enabled for access.

'

Directions and description here..

10) Force popular photos view to be the Smugmug view: go here.

11) Vanity URLs - Make web shortcuts with easier to remember names for some of your galleries: go here.

12) Remove clickability of your images from one or more galleries (useful for journal style galleries used for things like pricing, about me, etc...): go here.

13) Ability to customize your header/footer/navbar when the password page is displayed: go here.

14) Ability to hide categories, subcategories or galleries or style individual thumbnails: go here.

15) Make your site automatically redirect a mobile user to the mobile version of Smugmug: go here.

16) To control whether the user leaves a gallery comment or an image comment and not give them a choice: go here.

18) Remove Photo Count from Categories and Sub-categories

Change your category and sub-category thumbs from this:

to this:

Directions and description here.

19) Remove Viewing Styles from the Style or Share Menus

Control which styles are offered in the styles menu and/or which menu items are offered in the share menu. Before and After:

Directions and description here.

20) Stretchy Slideshow on Homepage

Make your homepage slideshow be stretchy so it automatically sizes itself to the size of the browser window.



Directions and description here.

21) Dynamic Navbar

Make your navbar show the user which page is the current page. Can be used with either custom navbars or with easy customizer navbars.



Directions and description here.

22) Show Hidden Images

Show you which of your images are hidden in the Smugmug view when logged in.



Directions and description here.

23) Rename menu items in the Style menu

Change the name of menu items in the style menu to whatever names you like better.

Directions and description here.

24) Auto open galleries that are all alone in a category or sub-category

If you have galleries or sub-categories that are all alone in a category or sub-category and there isn't a better way to organize your site that avoids this, then this script will automatically open the gallery rather than take the viewer to the category or sub-category without only a single thumbnail in it - thus making them click again to open the gallery.

For example, when my viewers click on my Hawaii sub-category, they would normally be presented with this:



After installing this customization, this screen is automatically bypassed and the gallery just opens.

Directions and description here.

25) Customize the "Package from this Pro" text in the Buy menu

If you offer packages for sale, you may want to change the text in the Buy menu that currently says "Package from this Pro" to be something more personal to your site.

Directions and description here.

26) Restore Full Length Gallery Descriptions in Category or Sub-category Page

By default, Smugmug truncates gallery descriptions to a certain number of characters. This customization will restore the gallery descriptions to their full length in the category or sub-category pages.

Directions and description here.

27) Change Default for Lightbox to Show Comments

By default, the Lightbox comes up with comments closed and the user has to open them. This customization will change the default so that the lightbox comes up open, showing comments. The end-user can still toggle it on or off, this just affects the default position.

Directions and description here.

28) Automatically redirect mobile users without Adobe flash to a page of your choice (like your galleries page)

If you have a slideshow on your homepage (like many do these days) and a mobile user without Adobe Flash on their mobile device goes there, they will see a big empty hole in your homepage (no slideshow). This customization does an automatic redirect to another page in your site (like your galleries page) when someone views your homepage and doesn't have Adobe Flash installed.

Directions and description here.

29) Use Different CSS Rules for Unlisted Galleries

Smugmug does not provide a CSS tag to indicate that a gallery is unlisted. This customization will add either the class "unlistedGallery" or the class "publicGallery" to the body tag on gallery pages. This then lets you use different CSS rules for public galleries vs. unlisted galleries. One obvious use for this is to allow the Sharing button, but hide the Facebook and Twitter buttons in unlisted galleries because they make it too easy to accidentally disclose an unlisted gallery (one click).

Directions and description here.

[aaronbrown]

Thanks for the collection, John!

Check the links for

• Remove the galleries or sub-categories suffix from your category or sub-categories pages: go here.
• Force popular photos view to be the Smugmug view: go here.

and

Remove clickability from multiple galleries (useful for journal style galleries used for things like pricing, about me, etc...): go here.

because the first two are pointing to the "Remove the top level of the breadcrumb" page and the last has some unintentional verbage within the address.

[jfriend]

Originally Posted by aaronbrown

Thanks for the collection, John!

Check the links for

• Remove the galleries or sub-categories suffix from your category or sub-categories pages: go here.
• Force popular photos view to be the Smugmug view: go here.

and

Remove clickability from multiple galleries (useful for journal style galleries used for things like pricing, about me, etc...): go here.

because the first two are pointing to the "Remove the top level of the breadcrumb" page and the last has some unintentional verbage within the address.

Sorry about that. I fixed the links.

[denisegoldberg]

Thanks for doing this John - what an awesome resource!

--- Denise

[jfriend]

Originally Posted by denisegoldberg

Thanks for doing this John - what an awesome resource!

--- Denise

You're welcome. I was having a hard time finding my own customizations to refer people to. And many were written for someone else and they were buried in some other thread. Now, it's much easier to refer people to them and hopefully some can even find them without having to ask.

[dougfdoug]

A great many thanks for your time and 'troubles', you have saved me and no doubt many others a lot of head scratching / hair tearing.

[jfriend]

I've added a few more customizations to the master list in the first post, including the ability to customize some parameters on the gallery slideshow or the full screen slideshow.

[jfriend]

Added #18, a script for trimming the photo count off of category and sub-category thumbs. There is an older script floating around dgrin that does a similar thing, but it creates errors in some circumstances.

[thenimirra]

This is great! I wish I had come across this sooner!

[jfriend]

Added #19 for removing items from the style menu.

[Vana]

this is awesome! thank you!

[Mohamed.Ghuloom]

Hey, thanks for the topic

I added:
#3
#5
#9
#11 (didn't work for me)
#12 (didn't work for me)
#15

You're really good at helping and javascripting

[jfriend]

Originally Posted by Mohamed.Ghuloom

Hey, thanks for the topic

I added:
#3
#5
#9
#11 (didn't work for me)
#12 (didn't work for me)
#15

You're really good at helping and javascripting

I've already posted in other threads of yours about script errors that you have to fix. Please don't post about the same issue in multiple places. One place is enough to get my attention and saves me the work of having to respond three times.

[jfriend]

Updated customization #19 so that it now works with either the Share menu or the Style menu and it's a lot more flexible now (it uses CSS to hide menu items).

[Mohamed.Ghuloom]

Originally Posted by jfriend

I've already posted in other threads of yours about script errors that you have to fix. Please don't post about the same issue in multiple places. One place is enough to get my attention and saves me the work of having to respond three times.

Hey thanks for this, I'll check them out now

and sorry for the hassle

[JLDTifft]

This collection is SO useful that I wonder if you can add to it instructions on how to make a floating window either to display a piece of text in the Description area, or, to display a hovered thumbnail's medium size image with caption & dimensions (when the thumb is in a search_results page). I have found two web sites offering the recipes, but, I am not sufficiently tekky to translate them into SM terms, though I'm sure that you can read them with total comprehension:

http://info.template-help.com/after_.../article2.html

http://www.dhtmlgoodies.com/index.ht...ndow_with_tabs

Thanks for your consideration!

Jeanne Tifft
http://www.jldtifft.com

[jfriend]

Added #20 for stretchy homepage slideshow.

[Andy]

John, is this something your wizardry handles?

http://smugmug.uservoice.com/pages/1...-?ref=comments

[jfriend]

Originally Posted by Andy

John, is this something your wizardry handles?

http://smugmug.uservoice.com/pages/1...-?ref=comments

They are asking for the ability to specify where the cart button goes (including in the navbar). It is actually easy to put a cart button of your own anywhere. One can do it with this line of code:

 
var myCartButton;
YE.onDOMReady(function() {
      myCartButton = new SM.buttons.viewCart("myNewCartDivContainer", "myCartButton", {});
}

where all you have to do is supply a container div named "myNewCartDivContainer" that's in a navbar item.

[JaeSen]

I searched all over for info on my problem and posted a question to a thread that seemed appropriate, but no one has ever answered my question...been waiting awhile , so I figured this might be a good place to get it answered for lots of people.

Can you maybe post something here about adding a Facebook "Become a Fan of" button to a page? Preferrably as part of (below the) footer.

I used the code supplied by facebook and put it in my custom footer box (want it below my footer on every page), it looked and worked great, BUT when I would click on a photo in a gallery to view it larger it would just say "loading..." but it never would. Something with the facebook code was making it impossible to view them. I removed it for now and all is fine, but would like to put it back on to get some additional exposure for my site!

If you don't want to address that on this thread, can you please take a look at the original thread I posted my question to...I just need some help please!

Here's the link: http://www.dgrin.com/showthread.php?t=131974