• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Collection of javascript customizations

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  13
1 2 3 4 5 11 Last »
Old Jun-24-2009, 06:49 PM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
Collection of javascript customizations
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..
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 items from the Style, Share or Buy Menus
Remove any menu item from the Style, Share or Buy menus. Before and After:

Directions and description here.

20) Stretchy Slideshow on Homepage
This customization has been replaced by the new slideshow in customization #34 below.

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.
30) Add your own Contact Links
Smugmug provides a Contact link (for pro account holders only) in the standard footer that will allow a viewer to contact you by email. But, many pros would like to put this link somewhere else (in their navbar, in their about page, in their own custom footer, etc...). This customization allows you to do that.

Directions and description here.


31) Multi Homepage
Create multiple copies of the homepage, each with different homepage content on it. Galleries page, search page, etc...

Directions and description here.
32) Hide or Format Parts of the Breadcrumb
This customization adds the ability to hide or format parts of the breadcrumb. For example, you could hide the category and sub-category pieces and just have Home > Gallery Name which some people (who don't really use categories) want. The script adds CSS identifiers to all the parts of the breadcrumb so you can literally use those identifiers to do anything you want in CSS (hide, format, etc...).

Directions and description here.
33) Limit what an assistant login can do for pro accounts
This customization hides a bunch of controls that modify your site when someone is logged in as an assistant. The goal of this customization is to only allow them to create galleries, upload photos and do gallery maintenance.

Directions and description here.

34) JFriend HTML5 Stretchy Slideshow
Loads 3-10x faster than the Smugmug slideshow, has fancy slideshow transitions, works on all browsers, iPhones, iPads, Android phones, Android tablets without requiring Adobe flash.

See detailed feature list, directions and description here and download site here.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question

Last edited by jfriend; Jun-11-2011 at 10:17 AM.
Old Jun-24-2009, 08:27 PM
#2
aaronbrown is offline aaronbrown
[Weddings|Portraits]
aaronbrown's Avatar
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.
Old Jun-24-2009, 08:41 PM
#3
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-25-2009, 04:55 AM
#4
denisegoldberg is offline denisegoldberg
Major grins
denisegoldberg's Avatar
Thanks for doing this John - what an awesome resource!

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Jun-25-2009, 01:06 PM
#5
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jul-07-2009, 02:43 AM
#6
dougfdoug is offline dougfdoug
Beginner grinner
Super helpful
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.
Old Jul-20-2009, 03:25 PM
#7
jfriend is offline jfriend OP
Scripting dude-volunteer
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jul-25-2009, 11:56 AM
#8
jfriend is offline jfriend OP
Scripting dude-volunteer
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-05-2009, 09:51 AM
#9
thenimirra is offline thenimirra
Loves to Grin
thenimirra's Avatar
This is great! I wish I had come across this sooner!
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Aug-08-2009, 12:42 PM
#10
jfriend is offline jfriend OP
Scripting dude-volunteer
Added #19 for removing items from the style menu.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-08-2009, 09:26 PM
#11
Vana is offline Vana
Spring chicken
thanks!
this is awesome! thank you!
__________________
Vana
Old Aug-09-2009, 02:59 AM
#12
Mohamed.Ghuloom is offline Mohamed.Ghuloom
Eyes are my Camera
Mohamed.Ghuloom's Avatar
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
__________________
Mohamed Photos
Give a Message
Old Aug-09-2009, 08:18 AM
#13
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-09-2009, 11:19 PM
#14
jfriend is offline jfriend OP
Scripting dude-volunteer
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).
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-11-2009, 02:50 AM
#15
Mohamed.Ghuloom is offline Mohamed.Ghuloom
Eyes are my Camera
Mohamed.Ghuloom's Avatar
Quote:
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
__________________
Mohamed Photos
Give a Message
Old Aug-19-2009, 01:06 PM
#16
JLDTifft is offline JLDTifft
Big grins
JLDTifft's Avatar
Eek request: how to make a floating window
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
Old Aug-20-2009, 01:17 PM
#17
jfriend is offline jfriend OP
Scripting dude-volunteer
Added #20 for stretchy homepage slideshow.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-24-2009, 04:31 AM
#18
Andy is offline Andy
Bicameral
Andy's Avatar
Question
John, is this something your wizardry handles?

http://smugmug.uservoice.com/pages/1...-?ref=comments
Old Aug-24-2009, 07:29 AM
#19
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
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:

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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Aug-25-2009, 10:15 AM
#20
JaeSen is offline JaeSen
Big grins
JaeSen's Avatar
Facebook Fan Button?
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
__________________
JaeSen
Winnsboro, TX
www.jaesenphotography.com
Page 1  of  13
1 2 3 4 5 11 Last »
Tell The World!  

Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump