Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

I am trying to add Supersized.js into my Drupal 7 site. I have updated Drupal to use the latest version of jQuery, I added scripts[] = js/supersized.3.1.3.min.js to my .info file, and in my html.tpl.php file i added:

<script type="text/javascript">  

        (function($){
            alert('test');
            $.supersized({
            alert('test2');
                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                random                  :   0,      //Randomize slide order (Ignores start slide)
                slide_interval          :   3000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   500,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,      //Disables image dragging and right click with Javascript
                image_path              :   'img/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   1,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}  
                                            ]

            }); 

        })(jQuery);

    </script>

I am stuck here. I am not very experienced with Drupal, Javascript, or jQuery.

Edited to include Bob's change to the wrapper.

share|improve this question
1  
I just released a module (still in sandbox, but it works for me) that adds Supersized to Views using the Views_JQFX module. Here is a link to my sandbox. Please try it out and let me know how it goes. Please keep any bugs/feature requests in the issue queue on the sandbox. –  Chance G Jun 15 '12 at 23:00
    
Well, I guess @kiamlaluno thought my answer wasn't worthy. I'm not sure why since it clearly implements supersized.js like the question asked for. I would love it if you test out my module though. I want to release it as a full project and could use help testing it out. –  Chance G Jun 26 '12 at 16:13
add comment

3 Answers

There are a few issues here.

  1. It's not in Drupal best practices to add a script to html.tpl.php

  2. That being said, there are two ways to do it. (a) You can add it to your theme's .info file and call a .js file script from there (i.e. "scripts.js") in your theme folder, ideally in a "js" or "scripts" sub-folder if you need this site-wide (b) If you don't need it site-wide or you can call it with drupal_add_js in your theme's template.php file to target only specific pages / paths

  3. The way Javascript gets called has changed in Drupal 7

The main new thing is to include something like:

(function ($) {
//needed for drupal 7
Drupal.behaviors.myTheme = {
attach: function(context, settings) {
// end drupal 7 syntax

... at the top of your script.

so a clean version should work like so:

(function ($) {

//needed for drupal 7
Drupal.behaviors.myTheme = {
attach: function(context, settings) {
// end dtupal 7 syntax


            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                random                  :   0,      //Randomize slide order (Ignores start slide)
                slide_interval          :   3000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   500,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,      //Disables image dragging and right click with Javascript
                image_path              :   'img/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   1,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}  
                                            ]

            }); 

//ending drupal 7 specific calls / syntax
}};
}) (jQuery);
share|improve this answer
add comment

Have you verified through viewing the page source in your browser that the script is being loaded correctly? If it isn't you can investigate into where the file is located on your server versus where your info file is pointing to.

If it IS loading correctly I imagine it's something client side. If it's just going on your front page, or a particular page you could use something like front--page.tpl.php/node--.tpl.php/etc and put your code there.

If it's client side it might also make good sense to create/find a working copy that uses just HTML, and transfer your code piece by piece from there, that way you can at least have a working copy to verify against.

This would require some troubleshooting, and a general working knowledge of JavaScript, but I will say I had similar issues getting a jQuery image gallery up on my own site, and worked it out after some trial and error.

edit

I just noticed in your code the wrapper is:

(function($){
    //code
}(jQuery));

You should change that to:

(function($){
  // code
})(jQuery);

Sorry I didn't notice before, but this is probably why the alerts aren't working.

share|improve this answer
    
The code is showing when I view source. –  Vigo Nov 8 '11 at 20:33
    
If it's loading correctly then it's either something client side or something with your images not loading; I can't really offer much more advice without additional info on what's happening and what's not though. –  Bob Nov 8 '11 at 20:37
    
Sorry about that, I accidentally submitted just the first line of my reply. The code is showing when I view source. I tried uploading the sample page that came with the source code and it works. the code used above came directly from their sample with the only change being to the beginning of the function. The original code was jQuery(function($){ which I changed to (function ($) { because of the documentation I found for using jQuery with Drupal. –  Vigo Nov 8 '11 at 20:38
    
You can try adding an alert(''); inside the jQuery container to make sure the code is executing. I would put in a working $.supersize(...) example, and then once you verify that works modify it to work with your images/etc –  Bob Nov 8 '11 at 20:59
    
I put alert('test'); in the script in a couple of places and it never triggered. –  Vigo Nov 9 '11 at 14:22
show 3 more comments

Have you included all the CSS and JavaScript files that come with supersized.js?

Looking at the code, it seems you have an alert('test2'); inside the supersized call. That should be removed; also, in the supersized call you have a option called "image_path" that doesn't seem to be an available option for the supersized plugin. Try removing that.

I would also update the plugin to the current release, which is 3.2.6.

share|improve this answer
    
Correct, alert('test2'); throws a syntax error. –  Danny Englander Jan 26 '12 at 20:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.