Beste,
Ik heb van een vriend een script gekregen om een carousel aan te maken.
Nu deze carousel kan slide, echter moet deze gefade worden, hij kent niet een makkelijke manier om dit te doen en vroeg me af als iemand dit wel kent met de script niet te fel aan te passen.
De html:
Code:<div class="photogalSub"> <div class="photogalSubPrNx"> <ul> <li><img class="prev" src="img/slideBack.png" alt="back" /></li> <li><img class="next" src="img/slideNext.png" alt="Next" /></li> </ul> </div> <div class="photogalSubphotos" style="position: relative; left: 0;"> <ul> <li class="margin-right"><a class="fancybox" href="img/fotogallerij/kamer01.jpg"><img src="img/fotogallerij/kamer01_t.jpg" alt="foto01" /></a></li> <li><a class="fancybox" href="img/fotogallerij/kamer02.jpg"><img src="img/fotogallerij/kamer02_t.jpg" alt="foto02" /></a></li> <li class="margin-right"><a class="fancybox" href="img/fotogallerij/kamer03.jpg"><img src="img/fotogallerij/kamer03_t.jpg" alt="foto03" /></a></li> <li><a class="fancybox" href="img/fotogallerij/kamer04.jpg"><img src="img/fotogallerij/kamer04_t.jpg" alt="foto04" /></a></li> <li class="margin-right"><a class="fancybox" href="img/fotogallerij/kamer05.jpg"><img src="img/fotogallerij/kamer05_t.jpg" alt="foto05" /></a></li> <li><a class="fancybox" href="img/fotogallerij/kamer06.jpg"><img src="img/fotogallerij/kamer06_t.jpg" alt="foto06" /></a></li> <li class="margin-right"><a class="fancybox" href="img/fotogallerij/kamer07.jpg"><img src="img/fotogallerij/kamer07_t.jpg" alt="foto07" /></a></li> <li><a class="fancybox" href="img/fotogallerij/kamer08.jpg"><img src="img/fotogallerij/kamer08_t.jpg" alt="foto08" /></a></li> </ul> </div> </div>
Javascript:
Code:<script type="text/javascript"> $pictures = 0; $('.photogalSubphotos ul li').each(function(){ $pictures++; }); $widthContainer = ($pictures/4) * 458; $(".photogalSubphotos").css('width', $widthContainer); $j=0; if($pictures <= 4){ $('.prev').css('visibility', 'hidden'); $('.next').css('visibility', 'hidden'); } $('.prev').css('visibility', 'hidden'); $('.next').click(function(){ $positionLeft = parseInt($(".photogalSubphotos").css("left")); $width = $(".photogalSubphotos").css("width"); $times = parseInt($width)/459; if($j < Math.floor($times)) { $j+=1; $('.photogalSubphotos').animate({left: '-=458'}, 700, 'linear'); } $('.prev').css('visibility', 'visible'); if($j >= Math.floor($times)) { $('.next').css('visibility', 'hidden'); } }); $('.prev').click(function(){ $positionLeft = parseInt($(".photogalSubphotos").css("left")); $times = $positionLeft+458; if($j >= $times) { $j-=1; $('.photogalSubphotos').animate({left: '+=458'}, 700, 'linear'); } $('.next').css('visibility', 'visible'); if($j == 0) { $('.prev').css('visibility', 'hidden'); } }); </script>
Alvast bedankt!
- Slide to Fade
-
21-11-2013, 09:18 #1
- Berichten
- 256
- Lid sinds
- 16 Jaar
Slide to Fade
-
In de schijnwerper
ACTIE: 24,95 voor blog met link op UR 47 / DR 42 vastgoed site!LinkpartnersGoedkope 10 Gbps Virtual Private Server (VPS) in Nederland (Met PURE NVMe opslag!)HostingNu 50% korting op duizenden linkopties | DR60+ DA50+ | Blogs & Links in alle nichesLinkpartners!!!!! Uniek portfolio met 570 .nl domeinnamen !!!!!Domein te koop -
21-11-2013, 15:30 #2Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: Slide to Fade
Ik kan het zo lastig testen maar heb een paar opmerkingen :)
Code:$('.photogalSubphotos ul li').each(function(){ $pictures++; });
Code:$('.photogalSubphotos ul li').length
Wat betreft de fadeout, dat kun je toch gewoon "opcity" aan de animate toevoegen ?
Code:$('.photogalSubphotos').animate({left: '-=458'}, 700, 'linear');
Code:$('.photogalSubphotos').animate({left: '-=458', 'opacity':'0'}, 700, 'linear');
-
22-11-2013, 11:50 #3
- Berichten
- 256
- Lid sinds
- 16 Jaar
Re: Slide to Fade
Bedankt, is opgelost!!
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic