Spritely: corrections and adjustments

Submitted by Nicola Rainiero on 2012-07-15 (last updated on 2018-11-26)

MAKE ATTENTION: In Drupal 8 is not possible to use drupal_add_library(), drupal_add_css() and drupal_add_js(), so this article written for Drupal 7 doesn't work anymore.

I presented it as a interesting resource to layout design of your web site, I showed a working example in spite of a my error in template page definition. Then I conclude the review with another insert mode and an unfruitful try to install it as a module.

After the Spritely: an example in 4 steps article, I convinced myself that the procedure of inserting animation was wrong, because in Drupal literature you use another form. So when I saw in the bottom of the page the final text twice, I thought it was a problem of spritely. However it was my fault, like I found in another article with comments.

In these pages I read a partial HTML comment, "Mio codice -->", an old code forgot in page.tpl.php. In the specific case the original Drupal code to print the Welcome in NAME OF YOUR SITE in the front page, when content is empty. Once cleaned this template file, the problem was disappeared and animation works very well.

Second insert mode

I tested another type of insertion using the instructions found in HOWTO: Add a jQuery effect, but the final result has two disadvantages:

  1. at the first loading, Drupal shows this amusing warning:
  2. the comment form looses the WYSIWYG editor.
    standard comment form altered comment form

This is the example and my code:

drupal_add_js('http://rainnic.altervista.org/misc/jquery.js'); drupal_add_js('http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js'); drupal_add_js ( '$(document).ready(function(){ $("#rainnic").sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0}); }); ', 'inline');
<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
			width: 100px;
			height: 125px;
			
            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

<?php drupal_add_js('http://rainnic.altervista.org/misc/jquery.js'); ?>
<?php drupal_add_js('http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js'); ?>

<?php
 drupal_add_js (
    '$(document).ready(function(){
     $("#rainnic").sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0});
    }); ',
    'inline');
?>

<div align="center">
	<div id="stage_rainnic" class="stage_rainnic">
		<div id="rainnic" class="stage_rainnic"></div>
	</div>
</div>

It is like the first insert mode, the only changing is the use of PHP code instead of Javascript.

Spritely loaded using module

Searching the optimum solution, I tried to install the Spritely Js Module for Drupal (still under development and downloadable here). Then I copy the jquery.spritely-0.6.js file in “sites/all/libraries/spritely/” and rename it in jquery.spritely.js. Well, now the only way to use Spritely is through instances and not directly using HTML code. You have to load "admin/structure":

And add a new instance, I made many attempts, this is just one example among many:

But doesn't work! It doesn't even load the spritely plugin!

 


Conclusion

The plugin of Spritely loaded manually works very well (B case in the Animate your Drupal 7 site, use spritely!). Although it has some forcing in the code, the example shown in homonym article works without any problem and it can be optimized using the examples supplied with the online documentation of Spritely. Suggestions and comments are welcome!




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.