• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Add a download button to your site

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  15
1 2 3 4 5 11 Last »
Old Jan-26-2009, 08:36 AM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
Add a download button to your site
For those who want to share original images with family/friends, here's an easier way to do that than explaining to your friends how to find the Save Image button.

After adding this code to your site, you will automatically get a download image button in your galleries that looks like the screenshot below. The button will automatically appear in any gallery that allows access to originals and will not appear in galleries where you have disabled originals. This is only designed to work in the Smugmug viewing style (not the other styles like Journal or Traditional) and it requires that you have originals enabled for access in the galleries where you wan the download button to appear and right-click protection turned off.



To install this on your site, all you have to do is copy this code below into your Bottom Javascript. When copying, make sure you get all of the code including all of the first line and the last close brace.

Code:
// ------------------------------------------------------------------------
// Code to insert a download button 
// 
// Works for any gallery that has originals enabled
// And right-click protection off
// And gallery is in smugmug or smugmug small view
// ------------------------------------------------------------------------

function IsAnySmugmugView()
{
    return(YD.hasClass(document.body, "smugmug") || YD.hasClass(document.body, "smugmug_small"));
}

function IsGalleryPage()
{
	return(YD.hasClass(document.body, "galleryPage"));
}

onPhotoShow.subscribe(ProcessDownloadButton);

function ProcessDownloadButton()
{
	// set onlyInGalleries to true if you only want a download button in gallery views
	// set onlyInGalleries to false if you want a download button in other views too like (search, keywords, date, etc...)
	var onlyInGalleries = false;
	if (IsAnySmugmugView() && (IsGalleryPage() || !onlyInGalleries))
	{
		if (photoInfo[ImageID].albumOriginals && !photoInfo[ImageID]['protected'] && (photoInfo[ImageID].Format !== "MP4"))
		{
			var downloadParent = "cartButtonsWrapper";
			if (!document.getElementById("cartButtonsWrapper"))
			{
				downloadParent = "altViews";
			}
			InsertDownloadButton(downloadParent);
		}
		else
		{
			// disable the button
			var downloadButton = YAHOO.widget.Button.getButton("downloadButtonId");
			if (downloadButton)
			{
				downloadButton.set("disabled", true);
			}
		}
	}
}

function InsertDownloadButton(parentId)
{
	// now add the download button
	var parentDiv = document.getElementById(parentId);
	var downloadButton = document.getElementById("downloadButtonId");
	if (downloadButton)
	{
		// make sure it is enabled
		YAHOO.widget.Button.getButton("downloadButtonId").set("disabled", false);
	}
	else if (parentDiv)
	{
		var downloadButtonInfo =
		{
			id: "downloadButtonId",
			label: "Download Image...",
			container: parentDiv,
			type: "button",
			className: "sm-button sm-button-small themesButton glyphButton",
			onclick: { fn: InitiateDownloadImage }
		};
		
		var dButtonObj = new YAHOO.widget.Button(downloadButtonInfo);
	}
}

function InitiateDownloadImage()
{
	// construct the download URL
	window.location = "/photos/" + ImageID + "_" + ImageKey + "-D.jpg";
}
__________________
--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-12-2012 at 05:04 PM.
Old Jan-26-2009, 08:54 AM
#2
J Allen is offline J Allen
Major grins
J Allen's Avatar
This is great John!!! Thanks for sharing.
__________________
-Joe Allen
My Smugmug Site
Old Jan-26-2009, 12:54 PM
#3
magicpic is offline magicpic
Major grins
magicpic's Avatar
Quote:
Originally Posted by family guy
This is great John!!! Thanks for sharing.
If I added this button....how do you just show it on one gallery? janis
__________________
(2) Canon 20d, (1) canon 30d, 70-200is 2.8, tamron 17-50,canon 50mm 1.4
http://www.photographybywidget.com
Old Jan-26-2009, 12:59 PM
#4
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by magicpic
If I added this button....how do you just show it on one gallery? janis
By default, it will only show on galleries that you have originals enabled for public access (e.g. the public could already download your originals). The idea is that if you don't want people to be able to download your originals, then just don't offer access to them by setting the customize gallery setting to a smaller size like X2. That's how you control where the button shows.
__________________
--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 Jan-26-2009, 01:18 PM
#5
magicpic is offline magicpic
Major grins
magicpic's Avatar
Quote:
Originally Posted by jfriend
By default, it will only show on galleries that you have originals enabled for public access (e.g. the public could already download your originals). The idea is that if you don't want people to be able to download your originals, then just don't offer access to them by setting the customize gallery setting to a smaller size like X2. That's how you control where the button shows.
I added the code and nothing showed here is my site:

http://www.photographybywidget.com/g...55765013_E6Xkh janis
__________________
(2) Canon 20d, (1) canon 30d, 70-200is 2.8, tamron 17-50,canon 50mm 1.4
http://www.photographybywidget.com
Old Jan-26-2009, 01:22 PM
#6
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by magicpic
I added the code and nothing showed here is my site:

http://www.photographybywidget.com/g...55765013_E6Xkh janis
You have an incomplete copy of the first line of the script. If you correct that, it should work.

You have:

how.subscribe(ProcessDownloadButton);

It should be

onPhotoShow.subscribe(ProcessDownloadButton);
__________________
--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 Jan-26-2009, 02:26 PM
#7
magicpic is offline magicpic
Major grins
magicpic's Avatar
Quote:
Originally Posted by jfriend
You have an incomplete copy of the first line of the script. If you correct that, it should work.

You have:

how.subscribe(ProcessDownloadButton);

It should be

onPhotoShow.subscribe(ProcessDownloadButton);
http://www.photographybywidget.com/g...55765013_E6Xkh

I still can not get it to work helpjanis
__________________
(2) Canon 20d, (1) canon 30d, 70-200is 2.8, tamron 17-50,canon 50mm 1.4
http://www.photographybywidget.com
Old Jan-26-2009, 02:30 PM
#8
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by magicpic
http://www.photographybywidget.com/g...55765013_E6Xkh

I still can not get it to work helpjanis
This is what I see. Do you not see the same?

__________________
--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 Jan-26-2009, 02:41 PM
#9
magicpic is offline magicpic
Major grins
magicpic's Avatar
Quote:
Originally Posted by jfriend
This is what I see. Do you not see the same?

sorry John...duh, I got it thanks alot..... janis
__________________
(2) Canon 20d, (1) canon 30d, 70-200is 2.8, tamron 17-50,canon 50mm 1.4
http://www.photographybywidget.com
Old Jan-27-2009, 02:41 AM
#10
pjspics is offline pjspics
paul-griffiths.net
pjspics's Avatar
Quote:
Originally Posted by magicpic
sorry John...duh, I got it thanks alot..... janis
Hi,
Love this idea but its not showing on my site.
http://pjspics.smugmug.com/gallery/5...60812154_MmYJc
I suspect that this is because I have the Buy and Cart buttons not visible and this new button seems to sit within that same area.
If this is the case, is there a way I can just have this download button visible and not the Buy buttons etc.
Many thanks
__________________
Thanks...
Paul

http://www.paul-griffiths.net/
http://www.paul-griffiths.net/popular/ - Popular Pics
Old Jan-27-2009, 06:02 AM
#11
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by pjspics
Hi,
Love this idea but its not showing on my site.
http://pjspics.smugmug.com/gallery/5...60812154_MmYJc
I suspect that this is because I have the Buy and Cart buttons not visible and this new button seems to sit within that same area.
If this is the case, is there a way I can just have this download button visible and not the Buy buttons etc.
Many thanks
You are correct. It positions the button next to the cart buttons and since you don't have those, it doesn't know where to put itself so it doesn't insert the button. You can change this one line of code to position the button next to the slideshow button if you want. Change this one line of code:

InsertDownloadButton("cartButtonsWrapper");

to

InsertDownloadButton("altViews");
__________________
--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 Jan-27-2009, 07:54 AM
#12
pjspics is offline pjspics
paul-griffiths.net
pjspics's Avatar
Quote:
Originally Posted by jfriend
You are correct. It positions the button next to the cart buttons and since you don't have those, it doesn't know where to put itself so it doesn't insert the button. You can change this one line of code to position the button next to the slideshow button if you want. Change this one line of code:

InsertDownloadButton("cartButtonsWrapper");

to

InsertDownloadButton("altViews");
As usual... perfect

Many thanks
__________________
Thanks...
Paul

http://www.paul-griffiths.net/
http://www.paul-griffiths.net/popular/ - Popular Pics
Old Apr-29-2009, 06:07 PM
#13
Erick L is offline Erick L
Major grins
Quote:
Originally Posted by jfriend
By default, it will only show on galleries that you have originals enabled for public access (e.g. the public could already download your originals). The idea is that if you don't want people to be able to download your originals, then just don't offer access to them by setting the customize gallery setting to a smaller size like X2. That's how you control where the button shows.
I just found the "Download image" button shows up when viewing the images within a keyword gallery, even though the originals shouldn't be available.
__________________
Erick - borealphoto.com
borealphoto.smugmug.com
Old Apr-30-2009, 03:44 AM
#14
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Erick L
I just found the "Download image" button shows up when viewing the images within a keyword gallery, even though the originals shouldn't be available.
I've updated the code in the first post in this thread with a more sophisticated version that handles the case where you have a view (like a keyword view) that might have a mixed set of images (some with originals and some with not). In that case, the button will enable or disable itself depending upon whether the selected image has originals enabled or not. The new version also lets you control whether the download button ever displays in keyword views or not (e.g. you can set it so it only shows in gallery views, not in keyword views).
__________________
--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 Apr-30-2009, 07:57 AM
#15
CWSkopec is online now CWSkopec
SmugMug QA
CWSkopec's Avatar
Hey John,
I added your code a little while back (thanks!) but just now realized that when I'm logged out, I get an error 404 page. When logged in, I can download the image. Did I mess up the code durring copy & paste?

Here's the gallery that's taking advantage of the code.

Thanks!
__________________
Chris
SmugMug QA
My Photos
Old Apr-30-2009, 08:08 AM
#16
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by CWSkopec
Hey John,
I added your code a little while back (thanks!) but just now realized that when I'm logged out, I get an error 404 page. When logged in, I can download the image. Did I mess up the code durring copy & paste?

Here's the gallery that's taking advantage of the code.

Thanks!
You have to turn right-click protection OFF if you want to use this. The newest version of the code (in the first posting in this thread) won't even show the download button if you have right-click protection on because it won't work. Apparently, it works if logged in, but definitely doesn't work when logged out if right-click protection is on.
__________________
--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 Apr-30-2009, 08:25 AM
#17
CWSkopec is online now CWSkopec
SmugMug QA
CWSkopec's Avatar
Quote:
Originally Posted by jfriend
You have to turn right-click protection OFF if you want to use this. The newest version of the code (in the first posting in this thread) won't even show the download button if you have right-click protection on because it won't work. Apparently, it works if logged in, but definitely doesn't work when logged out if right-click protection is on.
Ahhh... works perfectly now, thank you, sir!
__________________
Chris
SmugMug QA
My Photos
Old Apr-30-2009, 09:07 AM
#18
Erick L is offline Erick L
Major grins
Quote:
Originally Posted by jfriend
...the button will enable or disable itself depending upon whether the selected image has originals enabled or not. The new version also lets you control whether the download button ever displays in keyword views or not (e.g. you can set it so it only shows in gallery views, not in keyword views).
1- I made it so it doesn't display in keyword views and I'll keep it that way, but...

2- two buttons show in the gallery with originals enabled and before I turned it off in keyword views, those two buttons were there and only one of them would disable/enable. The other stayed enabled.

Great job!
__________________
Erick - borealphoto.com
borealphoto.smugmug.com
Old Apr-30-2009, 09:11 AM
#19
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Erick L
1- I made it so it doesn't display in keyword views and I'll keep it that way, but...

2- two buttons show in the gallery with originals enabled and before I turned it off in keyword views, those two buttons were there and only one of them would disable/enable. The other stayed enabled.

Great job!
There was a typo in the updated script (I've corrected it).

There are two copies of this line in the script you have installed:

onPhotoShow.subscribe(ProcessDownloadButton);

You should remove one of the two copies of that line from your javascript.
__________________
--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 Apr-30-2009, 09:30 AM
#20
Erick L is offline Erick L
Major grins
Working perfectly. That is some handy code.

Thanks a lot!
__________________
Erick - borealphoto.com
borealphoto.smugmug.com
Page 1  of  15
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