BEFORE YOU START: REQUIREMENTS
- CMS Made Simple ver. 1.11.4 Fernandina
- Gallery Module ver. 1.6
- Supersized jQuery plugin ver. 3.2.7
(download link: http://buildinternet.com/project/supers ... nload.html)
STEP 1: PREPARING SOURCES
1. Extract downloaded Supersized jQuery plugin .zip in handy place (like, Desktop…)
STEP 2: PREPARING IMAGES
1. Open images you want to use on your website in Photoshop or similar photo editor and set resolution to 72 dpi and width to 1920 px (you can set width to bigger size if you wish but this value is quite ok for usual monitor sizes)
2. Save as .jpg, quality 10
IMPORTANT!!!: While naming your images use only alphanumeric characters without spaces, dashes etc.!
3. Create custom thumbnails to match width 150px and height 108px and save thumbs as .jpg, quality 10.
IMPORTANT!!!: If you don't want or can't create custom thumbnails, you can use automatic feature in Gallery Module. However, this feature produces less quality thumbs with usually inadequate cropping, and, most important fact: If you don't use "Custom Thumbnails" method you won't be able to use dynamic gallery parameter which means you'll have to create separate Content Template for every gallery/album you want to display on your site!!!
My strongest recommandation is to forget about Gallery Module thumbs! If you insist on automatic thumbs, leave a post and I'll write another tutorial on How to use "Gallery Module" thumbnails...
STEP 3: UPLOADING SOURCES
1. Go to: Admin panel --> Content --> FileManager --> New directory, name your new directory "img" (no quotes)
2. Enter directory img and click tab "Upload files"
3. Navigate to extracted folder containing Supersized jQuery plugin, enter it, find and enter folder "img" and select all images. Click "upload" and wait until it's done.
4. Return to FileManager start pane and click "New directory", name this folder "js" (no quotes)
5. Enter folder "js", click "Upload files" tab
6. Navigate to extracted folder containing Supersized jQuery plugin again, enter it, locate and enter folder "js" and select following files:
- jquery.easing.min.js
- supersized.3.2.7.min.js
7. Return to FileManager start pane and click "New directory", name this folder "theme" (no quotes)
8. On your computer, navigate to extracted folder containing Supersized jQuery plugin, enter it, locate and enter folder "theme" and open "supersized.shutter.js" with appropriate program (like Smultron, TextWrangler, Notepad…)
9. Scroll down and find section "Theme Specific Variables"
8. Enter folder "theme", click "Upload files" tab
9. Navigate to extracted folder containing Supersized jQuery plugin again, enter it, locate and enter folder "theme" and select following file:
- supersized.shutter.js
10. Click "Upload"
STEP 4: CREATE GLOBAL CONTENT BLOCKS
1. Go to: Admin panel --> Content --> Global Content Blocks --> Add Global Content Block
2. Name your first GCBlock "supersizedscripts" (no quotes) and disable "WYSIWYG"
3. Copy following code and paste it into GCBlock content field:
Code: Select all
<__script__ type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></__script>
<__script__ type="text/javascript" src="uploads/js/jquery.easing.min.js"></__script>
<__script__ type="text/javascript" src="uploads/js/supersized.3.2.7.min.js"></__script>
<__script__ type="text/javascript" src="uploads/theme/supersized.shutter.js"></__script>
4. Click "Add Global Content Block" again
5. Name your second GCBlock "supersizedtrigger" (no quotes) and disable "WYSIWYG"
6. Copy following code and paste it into GCBlock content field:
Code: Select all
<__script__ type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
autoplay: 1, // Slideshow starts playing automatically
start_slide: 1, // Start slide (0 is random)
stop_loop: 0, // Pauses slideshow on last slide
random: 0, // Randomize slide order (Ignores start slide)
slide_interval: 4000, // Length between transitions
transition: 6, // 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
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
// 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_always: 1, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait: 1, // Portrait images will not exceed browser height
fit_landscape: 1, // Landscape images will not exceed browser width
// Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links: 1, // Individual thumb links for each slide
thumbnail_navigation: 0, // Thumbnail navigation
slides: [
// Slideshow Images
{Gallery dir="$gallery_dir" template='supersized'}
]
});
});
</__script>
NOTE: In this GCBlock you can change Supersized slideshow parameters
STEP 5: ADDING CSS
1. Navigate to extracted folder containing Supersized jQuery plugin, enter it, find and enter folder "css"
2. Open file "supersized.css" in appropriate program (TextEdit, Notepad or similar), select all and copy
3. Go to: Admin panel --> Layout --> Stylesheets --> Add new stylesheet
4. Name your new stylesheet "supersized" (no quotes) and paste copied .css into Stylesheet content field.
NOTE: Please DO NOT DELETE original Supersized plugin Release data - the first six lines which had been commented out in original .css! Deleting it just doesn't seem right…
5. Look and find every image-related parameter like this one:
and change path to match followingurl(../img/progress.gif)
NOTE: Differences are bolded and red!url('[[root_url]]/uploads/img/progress.gif')
6. Navigate to extracted folder containing Supersized jQuery plugin, enter it, find and enter folder "theme"
7. Open file "supersized.shutter.css" in appropriate program (TextEdit, Notepad or similar), select all and copy
8. Go to: Admin panel --> Layout --> Stylesheets --> Add new stylesheet
9. Name your new stylesheet "supersized.shutter" (no quotes) and paste copied .css into Stylesheet content field.
10. Repeat action No. 5 from this section.
11. Find following selector (very close to the end of this .css!)
and change it to:ul#thumb-list li img { width:200px; height:auto; opacity:0.5;…
NOTE: This is very useful for good thumbnail positioning in case you don't have thumbs at exactly 150x108px. For example, I have cropped vertical images to 150x108px but for horizontal images I have only changed Image Size to match height 108px. So these thumbs were approx. 165x108px. With min- width and height parameter in CSS I have resolved "shrinking" issue (where thumbs were forced to fit width but with thumbs at 165x108px this caused an empty space below such thumbs, comparing to thumbs at 150x108px).ul#thumb-list li img { min-width: 150px; min-height: 108px; opacity:0.5;…
STEP 6: GALLERY MODULE TEMPLATE
1. Go to: Admin panel --> Content --> Gallery --> Templates --> Create a new template
2. Name your new Gallery template "supersized" (no quotes)
3. Leave "Thumbnail Size" and "resize method" as is.
4. Copy the following code:
Code: Select all
{foreach from=$images item=image name=loop}
{if $smarty.foreach.loop.index % 2 == 0} { image : '{$image->file|escape:'url'|replace:'%2F':'/'}', title : '{$gallerytitle}',{else} thumb : '{$image->file|escape:'url'|replace:'%2F':'/'}', url : '#' } {if !$smarty.foreach.loop.last},{/if}{/if}
{/foreach}
5. Delete everything from "Template CSS-stylesheet" field and from "Template JavaScript" field.
NOTE: Of course, one can use these fields to paste corresponding original sources from downloaded Supersized plugin demo but I thought it won't be very handy. First of all, you won't change original plugin javascripts so they should be left in /uploads/js directory. Next, content stylesheets are much more user-friendly than Gallery template CSS-field. At least to me...
6. Click "Submit"
STEP 7: PAGE TEMPLATE
1. Go to: Admin panel --> Layout --> Templates --> Add new template
2. Name your new template "supersized" (no quotes)
3. Copy the following code
Code: Select all
{global_content name='supersizedscripts'}
{global_content name='supersizedtrigger'}
4. Copy following code
Code: Select all
{content block='gallery' assign='gallery_dir' label='test' oneline='1'}
5. If you want to design your own environment for Supersized plugin, delete everything between </__body> tags except the previous line of code and {content} tag. Come back later when you reach the end of this tutorial and start designing whatever you want...
6. Click "Submit"
STEP 8: LINKING
1. Click on "CSS" icon of newly created "supersized" template and add following .css styles from the dropdown menu:
- supersized
- supersized.shutter
(confirm each style by hitting "Add a stylesheet" button)
STEP 9: CREATING GALLERY
1. Go to: Admin panel --> Content --> Gallery --> Options tab
2. Set "Resize big images to maximum sizes" to width: 1920 px and height: 3000 px
NOTE: "Height: 3000 px" allows vertical images to be displayed in full browser width but this option must be allowed in GCBlock "supersizedtrigger" (look for parameters "fit_always" and "fit_portrait" and set "1" or "0" to allow or disallow this option)
3. Go to: Admin panel --> Content --> Gallery --> Add subgallery
4. Name this gallery as you wish but for this tutorial let's name it "Supersized1" (no quotes) and click "Save" button
5. Click "Add images"
6. Navigate to folder on your computer where all the images and custom thumbnails are saved
7. Select all images and corresponding thumbnails you wish to place in this gallery and click "Upload"
8. Once the images are uploaded sort them in following order:
IMPORTANT!!!: This step is crucial so JS would know how to connect images with corresponding thumbnails!- image1
- image1 thumbnail
- image2
- image2 thumbnail
- image3
- image3 thumbnail
… and so on.
9. Click "Save" button
STEP 10: ADD CONTENT PAGE
1. Go to: Admin panel --> Content --> Pages --> Add new content
2. Name your new content page as you wish but for this tutorial let's name it "Supersized1" (no quotes)
3. Set "Parent" to none
4. Fill extra field labeled as "test" with the name of directory where images and thumbnails were stored. In case of this tutorial the path to this directory would be "uploads/images/Gallery/Supersized1". Based upon that your Extra field should be filled with:
5. Disable "WYSIWYG"/Supersized1
6. Copy the following code
Code: Select all
{content block='gallery' assign='gallery_dir' label='test' oneline='1'}
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="uploads/img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="uploads/img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
7. Click "Options" tab and choose template "supersized" from the dropdown menu
8. Click "Submit" button
And that's it! Check your Content page "Supersized1" by clicking on magnifier icon...
Whoever wants to use this tutorial, do it exactly as it was written and let me know the result - does it work as it suppose to or not (in case I've made some mistake while writing this, I'd like to know so I could detect the error and make it right). I have tested this on two different sites but, you never know...
Enjoy and best regards!
Jakov
P.S. Example: http://www.majamakeup.com/index.php?page=beauty
www.studioides.com/idstest
so we all cab see the beautiful 
