Enabling multiple galleries in a jQuery gallery script
$30-50 USD
Cancelado
Publicado hace más de 14 años
$30-50 USD
Pagado a la entrega
I'm working on modifying a jQuery based gallery called Galleriffic. The documentation can be found at the following link:
[login to view URL]
Essentially, the gallery works great, with three exceptions:
1) Only one gallery can be displayed per page. I'd like to display multiple galleries per page (helpful in a blog format).
2) Thumbnails flicker upon page load... I'd like to prevent flickering.
3) URL is appended with the number of the image that's being loaded... I don't want any #numbers to appear upon load.
Regarding the multiple gallery issue, the author had this to say:
"I haven’t tried multiple albums on a single page. I would think it would work though, you just need to make sure you call the galleriffic init function on different elements, for example:
$(’#gallery1').[login to view URL](…);
$(’#gallery2').[login to view URL](…);
where #gallery1 and #gallery2 are the IDs of two different DOM elements."
I've made this edit to my view page, but it doesn't seem to have the effect I'm desiring. Please see my implementation at the following link:
[login to view URL]
As you can see, the gallery only works for the first post. I'm interested in contract someone who can help with the above three issues. I'm happy to provide server access, though I think this script can be modified independently. I've included my CodeIgniter view file ([login to view URL]) as well as the .zip Galleriffic package for your perusal. I suspect this will be a simple job... unfortunately, I'm not very versed with DOM.
Thanks for reading!
## Deliverables
<!-- MY CODEIGNITER VIEW FILE FOR [login to view URL] -->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="css/[login to view URL]" type="text/css" />
<link rel="stylesheet" href="css/[login to view URL]" type="text/css" />
<script type="text/javascript" src="[login to view URL]"></script>
<script type="text/javascript" src="[login to view URL]"></script>
</head>
<body>
<?=$header?>
<? foreach($list->all as $post): ?>
<h1><?=anchor('post/'.$post->id,$post->subject)?></h1>
<b><?=$post->user->get()->username?></b><br />
<?=$post->body?><br />
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="caption" class="embox"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<? foreach($post->upload->get()->all as $upload): ?>
<li>
<a class="thumb" href="uploads/<?=$upload->filename_new?>">
<img src="/[login to view URL]<?=$upload->filename_new?>?width=50&height=50&image=/uploads/<?=$upload->filename_new?>" alt="Don't forget your alt text" />
</a>
</li>
<? endforeach; ?>
</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
<div style="clear: both;"></div>
<? endforeach; ?>
<?=$this->pagination->create_links()?></div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('[login to view URL]').css({'width' : '300px', 'float' : 'left'});
$('[login to view URL]').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs [login to view URL] li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery').galleriffic('#thumbs', {
delay: 2000,
numThumbs: 12,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs [login to view URL]').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#caption').fadeOut('fast');
$('#slideshow').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow, #caption').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs [login to view URL]').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs [login to view URL]').fadeIn('fast');
}
});
});
</script>