Move slideshow button to the cart line

[jfriend]

[[This customization is now obsolete and DOES NOT WORK RELIABLY ANYMORE. Do not use it.]]

It has been replaced by this customization (http://www.dgrin.com/showthread.php?p=1206665) for moving the slideshow button and this customization (http://www.dgrin.com/showthread.php?p=1206681) for moving the share button.



If you want to move the slideshow button to the same line as the cart buttons (e.g. if you have hidden the breadcrumb), then you can use this script to do that.

First, add this CSS to your site-wide-customization (this makes this customization work in the new journal view):

.journalNav_right {width: auto;}

Then, paste this code into your bottom javascript:

// Because the slideshow button is created itself in onDOMReady,
// we don't know the timing of it's creation relative to our function getting called
// so we trigger our event this way to make it execution order independent
YE.onDOMReady(function () {YE.onContentReady("slideshowButton", MoveSlideshowButtonToCartLine);});

function MoveSlideshowButtonToCartLine()
{
var sourceObj = document.getElementById("slideshowButton");
var destObj = document.getElementById("buyButton");
if (sourceObj && destObj)
{
var obj = sourceObj.parentNode.removeChild(sourceObj);
destObj.parentNode.insertBefore(sourceObj, destObj);
}
}

This code requires that the gallery is enabled for print ordering (e.g. the buy button is showing).

If you also expose the Share button and want it moved to the Cart line too, then use this script instead:

//------------------------------------------------------------------------------------
// Move share and slideshow buttons to the cart line
//-------------------------------------------------------------------------------------

YE.onContentReady("shareButton", MoveToCartDiv);
YE.onContentReady("slideshowButton", MoveToCartDiv);

function MoveToCartDiv()
{
MoveObjToDiv(this, "cartButtonsWrapper");
}

function MoveObjToDiv(sourceObj, destDiv)
{
var destDivObj = document.getElementById(destDiv); // get the object for the dest div
if (sourceObj && destDivObj)
{
sourceObj.parentNode.removeChild(sourceObj); // remove object from it's current parent
destDivObj.appendChild(sourceObj); // add it to the new parent
}
}

[CynthiaM]

Will this code work if you don't have all galleries open for printing but only some?

[jfriend]

Will this code work if you don't have all galleries open for printing but only some? It will only change the location of the button in the galleries where printing is enabled. In the other galleries where printing is off, it will just not do anything. What do you want it to do in the galleries where printing is off?

[Allen]

jfriend, can you post the code for changing the slideshow button background
and text color? Moved it and it's now hidden amongst the other buttons. I
would like it to stand out a little.

Thanks

[CynthiaM]

It will only change the location of the button in the galleries where printing is enabled. In the other galleries where printing is off, it will just not do anything. What do you want it to do in the galleries where printing is off?

Just wanted to make sure it was not written to be used only if printing had been enabled across the board.

Thanks!

[jfriend]

jfriend, can you post the code for changing the slideshow button background
and text color? Moved it and it's now hidden amongst the other buttons. I
would like it to stand out a little.

Thanks The slideshow button text color can be changed with this CSS:

#slideshowButton button {color:red !important;}

The background color is not easy to change because you have to also make a new glyph with the right colors. In web dev, if you look at the #slideshowButotn object and look at the sm-button CSS for it, you can see what is controlling the background color.

[Allen]

The slideshow button text color can be changed with this CSS:

#slideshowButton button {color:red !important;}

The background color is not easy to change because you have to also make a new glyph with the right colors. In web dev, if you look at the #slideshowButotn object and look at the sm-button CSS for it, you can see what is controlling the background color.
Thanks John, text color adds just enough to make it a little more obvious.

[matrix311]

I have a question - I have added this code to my site to bring down the share and slideshow buttons. One thing I have noticed is the galleries I have set to the new Journal view, the buttons are stacked on top of each other. If I switch the style to anything else they are uniform and on one line, but if it's on the NEW Journal view, they are stacked. Since this is a new feature to Smugmug, is there new code that we will have to use to make the adjustments for Journal view?

[jfriend]

I have a question - I have added this code to my site to bring down the share and slideshow buttons. One thing I have noticed is the galleries I have set to the new Journal view, the buttons are stacked on top of each other. If I switch the style to anything else they are uniform and on one line, but if it's on the NEW Journal view, they are stacked. Since this is a new feature to Smugmug, is there new code that we will have to use to make the adjustments for Journal view? The new journal view has a hard coded with for the button container (unlike any other views). You can fix it by add this CSS:

.journalNav_right {width: auto;}

[matrix311]

perfect thank you! that worked.

[DulaMug]

If you want to move the slideshow button to the same line as the cart buttons (e.g. if you have hidden the breadcrumb), then you can use this script to do that.

First, add this CSS to your site-wide-customization (this makes this customization work in the new journal view):

.journalNav_right {width: auto;}

Then, paste this code into your bottom javascript:

// Because the slideshow button is created itself in onDOMReady,
// we don't know the timing of it's creation relative to our function getting called
// so we trigger our event this way to make it execution order independent
YE.onDOMReady(function () {YE.onContentReady("slideshowButton", MoveSlideshowButtonToCartLine);});

function MoveSlideshowButtonToCartLine()
{
var sourceObj = document.getElementById("slideshowButton");
var destObj = document.getElementById("buyButton");
if (sourceObj && destObj)
{
var obj = sourceObj.parentNode.removeChild(sourceObj);
destObj.parentNode.insertBefore(sourceObj, destObj);
}
}

This code requires that the gallery is enabled for print ordering (e.g. the buy button is showing).

If you also expose the Share button and want it moved to the Cart line too, then use this script instead:

//------------------------------------------------------------------------------------
// Move share and slideshow buttons to the cart line
//-------------------------------------------------------------------------------------

YE.onContentReady("shareButton", MoveToCartDiv);
YE.onContentReady("slideshowButton", MoveToCartDiv);

function MoveToCartDiv()
{
MoveObjToDiv(this, "cartButtonsWrapper");
}

function MoveObjToDiv(sourceObj, destDiv)
{
var destDivObj = document.getElementById(destDiv); // get the object for the dest div
if (sourceObj && destDivObj)
{
sourceObj.parentNode.removeChild(sourceObj); // remove object from it's current parent
destDivObj.appendChild(sourceObj); // add it to the new parent
}
}
Thanks, you guys are great.

[Vana]

Hi-

Does this code work for 'Style' button? If not, can you provide the code?

Thanks. My site: www.localcolor7.com


If you want to move the slideshow button to the same line as the cart buttons (e.g. if you have hidden the breadcrumb), then you can use this script to do that.

First, add this CSS to your site-wide-customization (this makes this customization work in the new journal view):

.journalNav_right {width: auto;}

Then, paste this code into your bottom javascript:

// Because the slideshow button is created itself in onDOMReady,
// we don't know the timing of it's creation relative to our function getting called
// so we trigger our event this way to make it execution order independent
YE.onDOMReady(function () {YE.onContentReady("slideshowButton", MoveSlideshowButtonToCartLine);});

function MoveSlideshowButtonToCartLine()
{
var sourceObj = document.getElementById("slideshowButton");
var destObj = document.getElementById("buyButton");
if (sourceObj && destObj)
{
var obj = sourceObj.parentNode.removeChild(sourceObj);
destObj.parentNode.insertBefore(sourceObj, destObj);
}
}

This code requires that the gallery is enabled for print ordering (e.g. the buy button is showing).

If you also expose the Share button and want it moved to the Cart line too, then use this script instead:

//------------------------------------------------------------------------------------
// Move share and slideshow buttons to the cart line
//-------------------------------------------------------------------------------------

YE.onContentReady("shareButton", MoveToCartDiv);
YE.onContentReady("slideshowButton", MoveToCartDiv);

function MoveToCartDiv()
{
MoveObjToDiv(this, "cartButtonsWrapper");
}

function MoveObjToDiv(sourceObj, destDiv)
{
var destDivObj = document.getElementById(destDiv); // get the object for the dest div
if (sourceObj && destDivObj)
{
sourceObj.parentNode.removeChild(sourceObj); // remove object from it's current parent
destDivObj.appendChild(sourceObj); // add it to the new parent
}
}

[flyingwolf]

I know I am a little late, but for the style button just add;

YE.onContentReady("viewingStylesButton", MoveToCartDiv);

Below the;

YE.onContentReady("shareButton", MoveToCartDiv);
YE.onContentReady("slideshowButton", MoveToCartDiv);

And your good to go.

[Paul Dunlop]

I know I am a little late, but for the style button just add;

YE.onContentReady("viewingStylesButton", MoveToCartDiv);

Below the;

YE.onContentReady("shareButton", MoveToCartDiv);
YE.onContentReady("slideshowButton", MoveToCartDiv);

And your good to go.

Hi
I added this and had a problem - the Slideshow button would show briefly on the image - then disappear
there was space for it between View Cart and Style - but it wouldn't show up

I left it on there for now - can you check it out for me?
pauldunlopphotography.smugmug.com

thanks in advance

[jfriend]

Hi
I added this and had a problem - the Slideshow button would show briefly on the image - then disappear
there was space for it between View Cart and Style - but it wouldn't show up

I left it on there for now - can you check it out for me?
pauldunlopphotography.smugmug.com

thanks in advance For a newer version of code to move the slideshow button, check out this post (http://www.dgrin.com/showpost.php?p=1203129&postcount=4).