Find Jobs
Hire Freelancers

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: '&lsaquo; Previous Photo', nextLinkText: 'Next Photo &rsaquo;', nextPageLinkText: 'Next &rsaquo;', prevPageLinkText: '&lsaquo; 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>
ID del proyecto: 2806069

Información sobre el proyecto

2 propuestas
Proyecto remoto
Activo hace 15 años

¿Buscas ganar dinero?

Beneficios de presentar ofertas en Freelancer

Fija tu plazo y presupuesto
Cobra por tu trabajo
Describe tu propuesta
Es gratis registrarse y presentar ofertas en los trabajos
2 freelancers están ofertando un promedio de $40 USD por este trabajo
Avatar del usuario
See private message.
$42,50 USD en 2 días
4,5 (9 comentarios)
2,6
2,6
Avatar del usuario
See private message.
$38,25 USD en 2 días
5,0 (5 comentarios)
1,4
1,4

Sobre este cliente

Bandera de UNITED STATES
United States
0,0
0
Miembro desde may 31, 2008

Verificación del cliente

¡Gracias! Te hemos enviado un enlace para reclamar tu crédito gratuito.
Algo salió mal al enviar tu correo electrónico. Por favor, intenta de nuevo.
Usuarios registrados Total de empleos publicados
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Cargando visualización previa
Permiso concedido para Geolocalización.
Tu sesión de acceso ha expirado y has sido desconectado. Por favor, inica sesión nuevamente.