I was using Slideshow II to display 2 independently shuffled banner rotators per page (1 at the top and 1 at the bottom)
on a site that had thousands of accounts, and looping through all of those records (twice) was slowing page loading time
down considerably.
Dave Edis, Senior Developer from Interactive Tools suggested using a MySQL call to pull the images from the table
instead and we came up with the following solution:
NOTE: There are 3 fields 'top_rotator_duration', 'bottom_rotator_duration' and 'cross_fade_duration' in a single
record editor (common_information) that control the length of time that each banner appears on the screen and the length
of the cross fade between images.
I'm using the image's info3 field to hold the URL for the site that the images are linked to.
AT THE TOP OF YOUR PAGE:
<?php // load uploads from accounts
$uploadRecords = mysql_select('uploads', " tableName = 'accounts' AND fieldName = 'large_banners' ");
?>
IN THE HEAD SECTION OF YOUR PAGE
<script>
window.addEvent('domready', function() {
// modified from http://joesong.com/2009/11/external-links-in-new-window-passive-and-with-mootools/
// to avoid using the 'target' attribute, which is not part of xhtml 1.0 strict
var currentDomain = window.location.host;
$(document.body).addEvent('click', function(evt) {
var target = $(evt.target);
if (target.get('tag') !== 'a') {
target = target.getParent();
}
if (target && target.get('tag') === 'a' && target.get('href').test('http') &&
!target.get('href').test(currentDomain)) {
window.open(target.get('href'), '_blank');
return false;
}
});
});
window.addEvent('domready', function(){
var data = { <?php $blank = "'" ?><?php $output = '';
?>
<?php shuffle ($uploadRecords) ?>
<?php foreach ($uploadRecords as $upload): ?>
<?php $output .= "'". "/cmsAdmin/uploads/".$upload['urlPath']. "'". ": { caption: " ."'4'". ",". "href:" . "'" .
$upload['info3'] . "'" . " }" . ","; ?>
<?php endforeach ?>
<?php $output = rtrim($output,","); // remove trailing comma
print $output;
?>
};
new Slideshow('top', data, { captions: false, controller: false, thumbnails: false, overlap: false, delay: <?php echo
$common_informationRecord['top_rotator_duration']?>, duration: <?php echo
$common_informationRecord['cross_fade_duration']?>, height: 100, hu: '', width: 668 });
});
</script>
<script>
window.addEvent('domready', function(){
var data2 = { <?php $blank = "'" ?><?php $output = '';
?>
<?php shuffle ($uploadRecords) ?>
<?php foreach ($uploadRecords as $upload): ?>
<?php $output .= "'". "/cmsAdmin/uploads/".$upload['urlPath']. "'". ": { caption: " ."'4'". ",". "href:" . "'" .
$upload['info3'] . "'" . " }" . ","; ?>
<?php endforeach ?>
<?php $output = rtrim($output,","); // remove trailing comma
print $output;
?>
};
new Slideshow('bottom', data2, { captions: false, controller: false, thumbnails: false, overlap: false, delay: <?php
echo $common_informationRecord['bottom_rotator_duration']?>, duration: <?php echo
$common_informationRecord['cross_fade_duration']?>, height: 100, hu: '', width: 668 });
});
</script>
WHERE YOU WANT YOUR BANNER ROTATORS TO APPEAR ON YOUR PAGE:
Top rotator
<div align="center" id="top" class="slideshow"></div>
Bottom Rotator
<div align="center" id="bottom" class="slideshow"></div>
|
