javascript - Fancybox thumbnails not working -
im having problems fancybox thumbnails. im doing calling fancybox gallery thumbnails helper fancybox iframe. dont know if problem, cant seem make thumbnails appear. show in media gallerie have. not on normal gallery. im using php loop put each of images. here code. have each of iframe(.various) gallery(fancybox-thumb) , media player thumb helpers(fancybox-media)
$(document).ready(function() { $(".various").fancybox({ maxwidth : 800, maxheight : 400, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : false, openeffect : 'none', closeeffect : 'none', afterclose : function() { var name = sessionstorage.getitem("name"); if (name == 'folder 1') { $('.fancybox-thumb').fancybox().trigger('click'); } if (name == 'folder 2') { $('.fancybox-thumb2').fancybox().trigger('click'); } if (name == 'folder 3') { $('.fancybox-thumb3').fancybox().trigger('click'); } } }); $(".fancybox-thumb").fancybox({ type: 'image', autoscale: true, preveffect : 'none', nexteffect : 'none', helpers : { title : { type: 'outside' }, thumbs: { width: 50, height: 50 } } }); $(".fancybox-thumb2").fancybox({ preveffect : 'none', nexteffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 } } }); $(".fancybox-thumb3").fancybox({ preveffect : 'none', nexteffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 } } }); $(".fancybox-media").fancybox({ preveffect : 'none', nexteffect : 'none', maxwidth : 800, maxheight : 600, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : false, openeffect : 'none', closeeffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 }, }, media : { } }); }); as code on gallery beeing made next.
<div> <?php $dirimg = 'img/galeria/folder 1'; $fileimg = scandir($dirimg); ?> <?php foreach($fileimg $image): ?> <a class="fancybox-thumb" rel="fancybox-thumb" href="img/galeria/folder 1/<?php echo $image; ?>" title=""> <img style="display: none;" src="img/galeria/folder 1/<?php echo $image; ?>" alt=""></a> <?php endforeach ?> </div> <div> <?php $dirimg = 'img/galeria/folder 2'; $fileimg = scandir($dirimg); ?> <?php foreach($fileimg $image): ?> <a class="fancybox-thumb2" rel="fancybox-thumb2" href="img/galeria/folder 2/<?php echo $image; ?>"> <img style="display: none;" src="img/galeria/folder 2/<?php echo $image; ?>"></a> <?php endforeach ?> </div> <div> <?php $dirimg = 'img/galeria/folder 3'; $fileimg = scandir($dirimg); ?> <?php foreach($fileimg $image): ?> <a class="fancybox-thumb3" rel="fancybox-thumb3" href="img/galeria/folder 3/<?php echo $image; ?>"> <img style="display: none;" src="img/galeria/folder 3/<?php echo $image; ?>"></a> <?php endforeach ?> </div> thanks :d
i optimize answer use folders , images want in diferent galleries. down side when close gallery have open folders iframe again. im working on looking how make folders iframe open when close gallery. eitherway, here code used. can see returned folder name , trim can use class of fancybox. hope better :d ill leave script , html used make galleries.
<script type="text/javascript"> $(function () { var austday = new date(); austday = new date(austday.getfullyear() + 1, 1 - 1, 26); $("#defaultcountdown").countdown({until: new date(2014, 3-1, 15)}); $('#year').text(austday.getfullyear()); }); $(document).ready(function() { $(".various").fancybox({ maxwidth : 800, maxheight : 400, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : false, openeffect : 'none', closeeffect : 'none', afterclose : function() { var name = sessionstorage.getitem("name"); $('.'+name.replace(/ /g,'')).fancybox({ preveffect : 'none', nexteffect : ' none', closebtn : true, arrows : true, nextclick : true, helpers : { thumbs : { width : 50, height : 50 } } }).eq(0).trigger('click'); } }); $(".fancybox-media").fancybox({ preveffect : 'none', nexteffect : 'none', maxwidth : 800, maxheight : 600, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : false, openeffect : 'none', closeeffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 }, }, media : { } }); }); here code makes galleries.
<?php $cont = 0; $dir = 'img/galeria'; $files1 = scandir($dir); ?> <?php foreach($files1 $file): ?> <?php if ($cont>1) { ?> <?php $dirimg = 'img/galeria/'.$file; $fileimg = scandir($dirimg); $cont = 0; ?> <div> <?php foreach($fileimg $image): if ($cont>2){?> <a class="<?php echo preg_replace('/\s+/', '', $file);?>" data-fancybox-group="<?php echo preg_replace('/\s+/', '', $file);?>" href="img/galeria/<?php echo $file;?>/<?php echo $image; ?>" title=""></a> <?php } $cont++; endforeach ?> </div> <?php } ?> <?php $cont++; endforeach ?> and here used iframe folders viewed.
<?php $cont = 0; $dir = 'img/galeria'; $files1 = scandir($dir); ?> <div class="title"><h1>folder de imagenes</h1></div> <div class="folders"> <ul class="gallery"> <?php foreach($files1 $file): ?> <?php if ($cont>1) { ?> <li> <a onclick="onclickbutton ('<?php echo $file;?>');" href="img/galeria/<?php echo $file;?>"> <div class="folderimg"><img style="width: 100px;" src="img/folderimg.png"></div> <div class="textfile"><h3><?php echo $file;?></h3></div> </a> </li> <?php } ?> <?php $cont++; endforeach ?> </ul> </div> hope helps :d
Comments
Post a Comment