Talking about Javascript and WordPress.
This post starts where normally my posts end: with the source code to download.
Never mind, it’s just a zip file with an image shipped with Windows Seven, but that’s not the point.
This is what you want it to see, when you download the file:
Once you downloaded the file, a modal box appears, giving you some extra information, and driving readers to my social pages and items for sale. Why am I doing this? Because in my opinion there’s not a more interested reader than a reader which downloads the files you provide.
So, just in case the reader missed my social pages and other relevant information such as items for sale, which represent a revenue for the blog, here I am with this reminder.
You can say it’s quite easy to do it, all you have to do is getting one of the thousands jQuery modal box you can find out there, assigning the link a specific class name, and you’re done. Or even better, I am sure there’s a ton of plugins doing this.
Well, I did not want any plugin and I did not want to edit more than 1000 posts adding the proper class name to my files, so that’s what I did:
First, I downloaded the reveal modal plugin for jQuery: it’s quite lightweight and it features everything I needed to make my modal work, and nothing more. Just one thing to know, it still works with jQuery live method which is now deprecated, so choose your jQuery version carefully. Probably, I will fix it to work with latest jQuery versions and release since it comes with a MIT license.
Now, the plugin wanted me to add data-reveal-id attribute to the link I am going to attach to the modal, but since I did not want to edit a thousand posts, I just added this code between <head> and </head> in my header.php theme file:
jQuery(document).ready(function(){
jQuery("a").click(function(){
if(jQuery(this).attr("href")){
var file = jQuery(this).attr("href");
var ext = file.split(".").pop();
if(ext=="zip"){
jQuery('#myModal').reveal({
animation: 'fadeAndPop',
animationspeed: 300,
closeonbackgroundclick: true
});
jQuery.ajax({
url: "http://emanueleferonato.com/wp-content/themes/naked2/trackdownload.php",
data: "dfile="+file,
type: "POST"
});
}
}
})
})
This way, when a link is clicked, I check its extenstion and if it’s a zip file, I am showing the modal and call a php file to keep track of the download. The content of the modal is stored in my footer.php file just before body closing tag.
<div id="myModal" class="reveal-modal">
<h1>Thank you for the download!!</h1>
<p>I hope you will find it useful and make something interesting out of it</p>
<p>To keep up to date with the blog, why don't you <a href = "https://www.facebook.com/emanueleferonato" target = "_blank">like my Facebook page</a> and <a href = "https://twitter.com/triqui" target="_blank">follow me on Twitter</a>?</p>
<h1>Want to learn more? Don't miss this:</h1>
<div style = "width:180px;float:left">
<a href = "http://emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/"><img src = "http://emanueleferonato.com/wp-content/themes/naked2/images/globez.png" border = "0" /></a>
</div>
<div style = "float:right;width:550px">
<p>Learn how to make a <strong>successful commercial Flash game from a real world example</strong>: <a href = "http://emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/">get the fully commented source code of Globez</a>, a Flash game played millions of times which generated a four figure income. <strong>Limited copies available</strong>.<br /><br /><strong><a href = "http://emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/">Get it now</a></strong></p>
</div>
<div style = "clear:both"></div>
<a class="close-reveal-modal">×</a>
</div>
And this is how you can dinamically add a modal box to your downloadable files and easily make it retroactive
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.