Royal Slider (not a free program) is an easy to use jQuery image gallery and content slider plugin with animated
captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets.
Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even
presentation. Developed in best practices of HTML5, CSS3 transitions are used for all animations (with fallback).
The on-line documentation is pretty complete and the plugin supports both normal eager load and lazy load**
implementations. I found that the lazy load implementation resulted in much faster load of the page with the image
slider already formatted.
Although Royal Slider is not a free program, and you’ll need to purchase a license for each site, they’re not
expensive. Dmitry, the author is very willing to help with customization and the forum is very helpful. The plugin also
comes in a Wordpress ready version.
Once you’ve uploaded the js and css files that come with the program to your site (mine are in a folder called
royalslider), and examined the demo files provided, it’s time to set up your CMSB implementation. There are many skins
and many options, but these are the ones that I chose for my site since it integrated well with my designs.
The code below demonstrates 2 implementations. One which utilizes the info1 field for the image title between the large
image and the thumbnails and another that utilize separate text fields.
You’ll need to create either a multi-record section with at least a single image upload field and upload some test
records and images. or a single record section with at least one multi image upload field.
My section also included some text fields for information related to the specific image. (use the info fields for
specific image information in a multi image upload field)
Images should be around 1920 px wide to allow them to fill the screen in full screen mode. At the least, you’ll need
the first default thumbnail (which I set to a max dimension of100px x 100px ) and you should un-check the resize image
check box.
In the head section your viewer you’ll need to load the Royal Slider js and css files, the css overide and Javascript
function below,. (the Javascript function can be loaded at the bottom of your page before the closing body tag if you
prefer)
NOTE: There are some modifications to the default skin and css files that you can download from this link and upload to
the appropriate subfolders in the royalslider folder on your site.
HTML5 VIDEO IMPLEMENTATION AT END OF RECIPE
http://www.thecmsbcookbook.com/downloads/royal-slider-mods.zip
<link rel="stylesheet" href="royalslider/royalslider.css">
<link rel="stylesheet" href="royalslider/skins/default/rs-default.css.php">
<script src='royalslider/jquery-1.8.3.min.js'></script>
<script src="royalslider/jquery.royalslider.min.js"></script>
<style type='text/css'>
.royalSlider .rsNav, .royalSlider .rsGCaption {
position: relative;
float: left;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 100%;
text-align: center;
padding: 0;
}
.royalSlider {
text-align: left;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('.royalSlider').royalSlider({
//autoScaleSlider:false,
controlNavigation: 'thumbnails',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 880,
arrowsNav:true,
arrowsNavAutoHide: false,
arrowsNavHideOnTouch: true,
// imageScaleMode: 'fit-if-smaller',
fitInViewport:true,
loop: true,
fullscreen: {
enabled: true,
nativeFS: false
},
globalCaption: true,
numImagesToPreload:2,
fadeinLoadedSlide: true,
keyboardNavEnabled: true,
navigateByClick: true,
thumbs: {
appendSpan: true,
firstMargin: true,
paddingBottom: 40
}
});
$('.rsGCaption').after( $('.rsNav') );
});
</script>
Then For a multi record table with a single image upload field, in the body where you want to display the Slider, insert
the following. (Note: The regular expression, “preg_replace” removes any double quotes in your info field that would
break the code with 2 single quotes)
To display only a title using the image’s info1 field:
<div class="royalSlider rsDefault">
<?php foreach ($your_sectionRecords as $record): ?>
<div >
<?php foreach ($record['your_upload_field'] as $index => $upload): ?>
<a class="rsImg " href="<?php echo $upload['urlPath'] ?>">
<?PHP $upload['info1'] = preg_replace("/[\"]/", "''", $upload['info1'] ); ?>
<div align='center' style='font-size:1.4em;' class='text_font ' >
<?php echo ucwords($upload['info1']) ?>
</div>
</a>
<div class="rsTmb" >
<img class="rsTmb" src="<?php echo $upload['thumbUrlPath'] ?>" /></div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
To use text fields for information relating to the image (multi-record table, single image upload field):
<div class="royalSlider rsDefault">
<?php foreach ($your_sectionRecords as $record): ?>
<div>
<?php foreach ($record['image'] as $upload): ?>
<a class="rsImg " href="<?php echo $upload['urlPath'] ?>" />
<?PHP $record['description'] = preg_replace("/[\"]/", "''", $record['description'] ); ?>
<?PHP $record['title'] = preg_replace("/[\"]/", "''", $record['title'] ); ?>
<?PHP $record['medium'] = preg_replace("/[\"]/", "''", $record['medium'] ); ?>
<?PHP $record['size_of_work'] = preg_replace("/[\"]/", "''", $record['size_of_work'] ); ?>
<?PHP $record['edition_size'] = preg_replace("/[\"]/", "''", $record['edition_size'] ); ?>
<?PHP $record['year_created'] = preg_replace("/[\"]/", "''", $record['year_created'] ); ?>
<?php // putting the link text in a div and styling the div allowed for fixed height adjustment for captions (reduced
css .royalSlider max-height: 85%; to accomodate) ?>
<div align='center' style='font-size:1.4em; height:150px;' class='text_font' >
<?php if ($record['title']): ?>
<b><?php echo strtoupper($record['title']) ?></b>
<?php endif; ?>
<?php if ($record['size_of_work']): ?>
<?php echo $record['size_of_work'] ?>
<?php endif; ?>
<?php if ($record['medium']): ?>
<?php echo $record['medium'] ?>
<?php endif; ?>
<?php if ($record['edition_size']): ?>
<b>Edition of: </b><?php echo $record['edition_size'] ?>
<?php endif; ?>
<?php if ($record['year_created']): ?>
<b>Created in: </b><?php echo $record['year_created'] ?>
<?php endif; ?>
<?php echo $record['description'] ?>
</div>
</a>
<?php endforeach; ?>
<div class="rsTmb">
<?php foreach ($record['your_upload_field'] as $upload): ?>
<img class="rsTmb" src="<?php echo $upload['thumbUrlPath'] ?>" />
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
For a multi image upload field the code in the body is slightly different:
NOTE: if you're getting strange ghost thumbnail images, you may have to remove the $('.rsGCaption').after( $('.rsNav')
); from the Royal Slider Javascript on your page.
<div class="royalSlider rsDefault">
<?php foreach ($your_sectionRecords as $record): ?>
<?php foreach ($record['your_upload_field'] as $index => $upload): ?>
<div > <a class="rsImg " href="<?php echo $upload['urlPath'] ?>">
<?PHP $upload['info1'] = preg_replace("/[\"]/", "''", $upload['info1'] ); ?>
<div align='center' style='font-size:1.4em;' class='text_font ' >
<?php echo ucwords($upload['info1']) ?>
</div>
</a>
<div class="rsTmb" >
<img class="rsTmb" src="<?php echo $upload['thumbUrlPath'] ?>" /></div>
</div>
<?php endforeach; ?><?php endforeach; ?>
</div>
To use text fields for information relating to the image use the info fields as above
**Lazy loading, also known as dynamic function loading, is a mode that allows a developer to specify what components of
a program should not be loaded into storage by default when a program is started. Ordinarily, the system loader
automatically loads the initial program and all of its dependent components at the same time (eager loading). In lazy
loading, dependents are only loaded as they are specifically requested. Lazy loading can be used to improve the
performance of a program if most of the dependent components are never actually used.
HTML5 VIDEO IMPLEMENTATION
The only 3 changes (and one caution) are:
CAUTION
You will probably have to increase the upload_max_filesize and post_max_size values in your php.ini files (there are 3
places where these values appear) See the recipe "FILE UPLOAD ISSUES WITH THE NEW HTML UPLOADER AND FILE SIZE ISSUES IN
V3.15 AND OTHER VERSIONS" for more information on how to do this. ( http://www.thecmsbcookbook.com/recipedetail.php?586
)
CHANGES
1) Make sure that you're using the latest build of the royalslider JS file from http://dimsemenov.com/private/home.php?a
and have included the video module (You'll have to own RoyalSlider and have log in credentials to access this page)
2) Change the javascript on your page (below the css in the head) to:
<link rel="stylesheet" href="royalslider/royalslider.css">
<link rel="stylesheet" href="royalslider/skins/default/rs-default.css.php">
<script src='royalslider/jquery-1.8.3.min.js'></script>
<script src="royalslider/jquery.royalslider.min.js"></script>
<style type='text/css'>
.royalSlider .rsNav, .royalSlider .rsGCaption {
position: relative;
float: left;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 100%;
text-align: center;
padding: 0;
}
.royalSlider {
text-align: left;
}
</style>
<script type='text/javascript'>
$(window).load(function() {
$('.royalSlider').royalSlider({
//autoScaleSlider:false,
controlNavigation: 'thumbnails',
autoScaleSlider: true,
arrowsNavHideOnTouch: true,
fitInViewport: true,
loop: true,
fullscreen: {
enabled: true,
nativeFS: false
},
globalCaption: true,
numImagesToPreload: 2,
thumbs: {
}
});
$('.rsGCaption').after($('.rsNav'));
var slider = $('.royalSlider').data('royalSlider');
slider.ev.on('rsOnCreateVideoElement', function(e, url) {
slider.videoObj = $('<video controls src=" ' + url + '"></video>');
});
});
</script>
3) In the body where you're showing the slider (assuming its a single record with a single upload field that allows
multiple uploads):
<div class="royalSlider rsDefault">
<?php foreach ($your_tableRecords as $record): ?>
<?php foreach ($record['your_upload_field'] as $index => $upload): ?>
<?php if ($upload['extension'] == 'mp4'): ?><div class="rsContent" >
<a class="rsImg" href="http://www.your_site.com/images/video_placeholder_image.jpg"
data-rsVideo="http://your_site.com<?php echo $upload['urlPath'] ?>">
<?php else:?> <div><a class="rsImg " href="<?php echo $upload['urlPath'] ?>">
<?PHP $upload['info1'] = preg_replace("/[\"]/", "''", $upload['info1'] ); ?><?php endif ?>
<div align='center' style='font-size:1.4em; color:#FFF' class='sub_heading_font' >
<?php if($upload['info1']):?><?php echo $upload['info1']?><?php endif ?>
</div>
</a>
<div class="rsTmb" >
<img class="rsTmb" src="<?php if ($upload['extension'] == 'mp4'):
?>http://www.your_site.com/images/video_placeholder_image.jpg<?php else :?><?php echo $upload['thumbUrlPath'] ?><?php
endif ?>" /></div>
</div>
<?php endforeach; ?><?php endforeach; ?>
</div>
You'll need to modify the above if you're using separate records each with a single upload, but either way, the key is
to be able to differentiate between video files and images (you might be able to use<?php if (!$upload['isImage'] ): ?>
instead of <?php if ($upload['extension'] == 'mp4'): ?>)
|
