Creating pop-up messages on SM

rddayton · September 11, 2012

I have a SmugMug Business account and like the way it looks and performs, but I want to add a level of functionality. I don't know if or how I can do it. Please help.

It would be very nice to have a pop-up text message appear within my site. For example. As a sports shooter, I post game galleries on my site, but want to leave them there for a for a limited time. It would be very nice to have a nicely formatted message appear on the home screen (and perhaps again when they click on the individual gallery) telling them that "The 2012 Varsity Baseball pictures will be available until September 30, 2012." It's a subtle, friendly reminder to place orders before the gallery is no longer on-line. From a business standpoint, it also eliminates the tendency of those who never buy anything because they can look at it on-line free whenever they want.

Thoughts. Comments. Advice. All are welcome.

rickdayton.smugmug.com

docwalker · September 11, 2012

Rick,

This can be done with some customizations. I had to add a similar box to our help pages yesterday to let SmugMug customers know about the GoDaddy outage. Here is a sample that you can use:

<script>
function display_alert()
**{
**alert("Hello! I am an alert box!!");
**}
</script>

<body onload="display_alert()" value="Display alert box" />

remove the ** when you use the code on your site.

There are other versions on the net that you can use. I am looking at those for a more permanent solution.

jfriend · September 11, 2012

docwalker wrote: »
Rick,

This can be done with some customizations. I had to add a similar box to our help pages yesterday to let SmugMug customers know about the GoDaddy outage. Here is a sample that you can use:
<script>
function display_alert()
**{
**alert("Hello! I am an alert box!!");
**}
</script>

<body onload="display_alert()" value="Display alert box" />
remove the ** when you use the code on your site.

There are other versions on the net that you can use. I am looking at those for a more permanent solution.

I'm not sure that this is what anyone wants. This would display an alert on every single page on your Smugmug site.

docwalker · September 11, 2012

John, true. But I was thinking of putting it in a gallery description etc. Not necessarily the site customizations. I used it on just the landing page of the help and it worked ok.

I am working on some better, more customizable options for internal use as well.

If you have some better options, I would love to see them.

dbveto · September 11, 2012

Look at this and see if that is what you want.
http://www.realphotoman.com/Racine-Raiders

How I did it

In CSS

/*  message box used to display special notes on pages */
/* first I set it to display none to hide it */
#RRmsg {
    display:none;
    background: none repeat scroll 0 0 #99cccc ;
    border:3px groove #B0C4DE;
    margin: 10px auto;
    padding: 1em;
    width: 700px;
}

/*  message box used to display special notes on pages */
/* here I set it to display on the Racine-Raiders category  */

.category_Racine_Raiders #RRmsg {
    display:block;
    
}

In My Custum header

<div id="RRmsg">
I would like to thank the Racine Raiders Players, Coaches, Dancers and Staff without them 
I would not be able to take these shots.
<br>
<!--This link uses Automatically Center your Popup script java script to open in a new window that is centered-->
<p><a href="http://feedburner.google.com/fb/a/mailverify?uri=RealphotomansPhotosMatchingRacineRaiders2012&amp;loc=en_US" onclick="centeredPopup(this.href,'myWindow','600','475','yes');return false">Subscribe by Email to 2012 Season Photos</a></p>

</div>

jfriend · September 11, 2012

docwalker wrote: »

John, true. But I was thinking of putting it in a gallery description etc. Not necessarily the site customizations. I used it on just the landing page of the help and it worked ok.

I am working on some better, more customizable options for internal use as well.

If you have some better options, I would love to see them.

Your example calls it from the oinload event in the <body> tag and the only place that can be implemented on Smugmug via customization is globally. That's what I was concerned about. Yes, it could be triggered differently to only be active on some pages, but that would take different coding.

Dota · September 11, 2012

Hey Rddayton,

I asked this question this past summer and here is what I found...

http://www.dgrin.com/showthread.php?t=223802&highlight=modal

I used a jquery modal called messi modal with it being described here...

http://marcosesperon.es/apps/messi/

The steps I used to insert the code was the following...

1. downloaded the messi.css and messi.js from their provided github site.
2. copied the messi.css and messi.js to the CSS and "Top Javascript" in Advanced Customization (I think I used the min version but they're the same I believe).
3. Also under advanced customizaiton I added the following to the Head tag...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>


<link rel="stylesheet" href="messi.min.css" />

And for the Body tag, I added the following...

<script src="messi.min.js"></script>

4. Then for the gallery you want to add the code to, edit the gallery description and add the following code...

<html>


<script>
new Messi('Add whatever message you want.', {title: 'whatever title', top: '220px', modal: true});
</script>

</html>

You can research other jquery modals on the net to give you the pop up message you're looking for. Hope this helps