Results 1 to 3 of 3

Thread: Using SUPERSIZED

  1. #1
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    France...ex UK

    Default Using SUPERSIZED

    Jjust looking at one of Ray C's post from last year about using SUPERSIZED.

    I downloaded it but how does it get used with NOF2015?
    Is it just a case of copying the css code and changing file paths etc?
    DO I just use text box / ALt T to insert the code?
    Does anything need to be FTP'd to the server?

    Documentation just explains all the parameters, not actually how to use it.


  2. #2
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Toronto-ish, Canada



    Sorry, I didn't notice your PM from earlier.

    It's been a year since I did this, so the specifics are a little foggy. But you will need to insert the SuperSized code in the <head> section to call the various scripts, and, of course, you will need to have the scripts and CSS files uploaded to the corresponding folder so they can be found when called.

    If you switch to <> Code display via the tab at the bottom of your Page View (where it says "Design | Code | Preview"), there are various pre-defined insertion points to place code. Here's what it looks like:

    Click image for larger version. 

Name:	Insert Code.jpg 
Views:	117 
Size:	90.4 KB 
ID:	2548

    One key point is to ensure you only have ONE call to jQuery. NOF uses jQuery for their menus among other things. I inserted the SuperSized stuff right at the end of the <HEAD> section so it would appear AFTER the NOF call to load jQuery, then I removed the jQuery call required by SuperSized since it is already being done by NOF.

    Here is the page I did as part of a project for a photography class I was taking. Only the HOME page uses SuperSized.

    Here is my actual code if you want to have a look.


    <!-- [BEGIN Custom4] -->
    <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
    <!-- <script type="text/javascript" src=""></script> -->
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
    <script type="text/javascript">
    			// Functionality
    			slide_interval          :   7000,		// 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		:	1000,		// Speed of transition
    			// Components							
    			slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
    			slides 					:  	[			// Slideshow Images
    				{image : 'ss/bg/bg01.jpg', thumb : 'ss/bg/bg01-th.jpg' },
    				{image : 'ss/bg/bg02.jpg', thumb : 'ss/bg/bg02-th.jpg' }, 
    				{image : 'ss/bg/bg03.jpg', thumb : 'ss/bg/bg03-th.jpg' }, 
    				{image : 'ss/bg/bg04.jpg', thumb : 'ss/bg/bg04-th.jpg' }, 
    				{image : 'ss/bg/bg05.jpg', thumb : 'ss/bg/bg05-th.jpg' }, 
    				{image : 'ss/bg/bg06.jpg', thumb : 'ss/bg/bg06-th.jpg' }, 
    				{image : 'ss/bg/bg07.jpg', thumb : 'ss/bg/bg07-th.jpg' }, 
    				{image : 'ss/bg/bg08.jpg', thumb : 'ss/bg/bg08-th.jpg' }, 
    				{image : 'ss/bg/bg09.jpg', thumb : 'ss/bg/bg09-th.jpg' },  
    				{image : 'ss/bg/bg10.jpg', thumb : 'ss/bg/bg10-th.jpg' },  
    				{image : 'ss/bg/bg11.jpg', thumb : 'ss/bg/bg11-th.jpg' }  
    <!-- [END Custom4] -->
    Ray Cambpell
    Sounds In Sync
    Linked in

  3. #3
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    France...ex UK


    Many thanks for the detailed instructions Ray!!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts