Search the Community
Showing results for tags 'fancybox'.
Found 9 results
-
Does anyone know of an alternative to fancybox? http://fancyapps.com/fancybox/ I've been using fancybox for years, but am finding issues with Google Tag Manager, so I'm looking for a "modern" replacement. I need the alternative to support images and hosted videos. I'm curious to know what experiences you've had with the other options out there.
-
Hi there I know this is not the topic for this forum, but I need help and somehow can't post in the foundation forum. I am registered, but since yesterday I can't publish any posts. Maybe someone here can give me a hint.. I am a Foundation 6 beginner. I made a website responsive with Foundation 6. Fancybox via Processwire was working smoothly. Now I have implemented Foundation 6, and theres no more fancybox.... Example: http://olikehrli.ch/galerie/ Does anybody have a suggestion what the cause could be? It is exactly the same as it was before, but now with the framework nothing goes....it has to be something with F6. Thanks for any help Jakob My code: <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Oli Kehrli</title> <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/app.css"> <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/style.css"> <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="<?php echo $config->urls->templates?>source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="<?php echo $config->urls->templates?>source/jquery.fancybox.pack.js?v=2.1.5"></script> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> </head> <!-- _____________BACKGROUND IMAGE im BODY_______________ --> <body> <div class="background_wrap"></div> <div class="top-bar" > <div class="row"> <div class="large-12 columns"> <!-- ______________LOGOS RECHTS__________________ --> <ul class="menu align-right" class="logos"> <li><a href="http://www.facebook.com/pages/Oli-Kehrli/111633355624653"><img class="logos" src="<?php echo $config->urls->templates?>images/logo/facebook.gif" ></a></li> <li><a href="https://www.youtube.com/channel/UCLPySXRIt9zfzGnj1fQ8Mvw"><img class="logos" src="<?php echo $config->urls->templates?>images/logo/youtube.gif" ></a></li> </ul> <!-- _________________LOGO__________________ --> <!-- <h1>Oli Kehrli</h1>--> <a href="<?php echo $pages->get('/nojs')->url; ?>"> <img class="logo-name" src="<?php echo $config->urls->templates?>images/logo/re_logo_schwarz.gif" > </a> </div> </div> </div> <!-- _____________NAVGATION_______________ --> <div class="row" > <div class="large-12 medium-12 columns"> <!-- ____________TOGGLE MENU_____________ --> <div class="title-bar" data-responsive-toggle="resp-menu" data-hide-for="medium" > <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title" >Menu</div> </div> <div class="top-bar-left" id="resp-menu" > <div class="top-bar-left" > <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu > <li ><a href="<?php echo $pages->get('/nojs')->url; ?>" >nöis</a></li> <li ><a href="<?php echo $pages->get('/uftritte')->url; ?>" >uftritte</a></li> <li ><a href="<?php echo $pages->get('/bio')->url; ?>" >bio</a></li> <li ><a href="<?php echo $pages->get('/medie')->url; ?>" >medie</a></li> <li ><a href="<?php echo $pages->get('/albe')->url; ?>" >albe</a></li> <li ><a class="current" href="<?php echo $pages->get('/galerie')->url; ?>" >galerie</a></li> <li ><a href="<?php echo $pages->get('/videos')->url; ?>" >videos</a></li> <li ><a href="<?php echo $pages->get('/links')->url; ?>" >links</a></li> <li class="last"><a href="<?php echo $pages->get('/kontakt')->url; ?>" >kontakt</a></li> </ul> </div> </div> </div> </div> <!-- ____________LINIE_____________ --> <div class="line"><hr class="style-two"></div> <!-- _______________MAIN CONTENT______________ medium-8 centred row innerhalb einer large-12 row --> <!-- <div class="row"> <div class="large-12 columns"> --> <div class="row"> <div class="small-12 large-7 medium-8 medium-push-1 columns" id="bg" > <!-- BILDERGALLERIE MIT PHP --> <? echo $page->seitenname; ?> </br> </br> </br> <?php foreach($page->bildergalerie as $image) { $thumbnail = $image->size(180,180); echo "<a href='{$image->url}' class='fancybox' rel='group' title='{$thumbnail->description}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a>"; } ?> </div> <!-- <div class="sidebar"> --> <div class="small-12 large-5 medium-4 columns" id="bg" > <? echo $page->sidebar; ?> </div> </div> <!-- </div> </div> --> <!-- __________________Foundation Scripts___________ --> <script src="<?php echo $config->urls->templates?>bower_components/jquery/dist/jquery.js"></script> <script src="<?php echo $config->urls->templates?>bower_components/what-input/what-input.js"></script> <script src="<?php echo $config->urls->templates?>bower_components/foundation-sites/dist/foundation.js"></script> <script src="<?php echo $config->urls->templates?>js/min/app-min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> </body> </html>
-
From : http://fancyapps.com/fancybox/ Concerning to that i have to pay 15,00 € for each domain i use Fancy ? So maybe its not a good idea to use Fancybox at all ? Asking myself if that counts for backend use too, so in had to pay 15 bucks anytime i use PW on a commercial site?
-
Hi all, I've just spent most of the night trying to debug this to no avail. My site has been working as expected for a while now, but over the last two days I've noticed a few weird issues. The only thing I've changed is to update my foundation 5 files from 5.1.1 to 5.2.2, so I reckon it might be something to do with that? However, I was hoping you'd have a look at the following code to make sure I've not done something stupid. The following code has been cut back to the basics for troubleshooting, and should just load the duckduckgo logo in a fancybox popup window, but it loads it as a flat page instead. <!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/normalize.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/foundation.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/custom.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>fb/jquery.fancybox.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="<?=$config->urls->templates;?>fb/jquery.fancybox.pack.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/modernizr.js"></script> <title><?=$pages->get("/")->site_name;?> | <?=$page->title;?></title> </head> <body> <div class="container"> <a class='th single_1' href='https://duckduckgo.com/assets/_logo_next.png' title='duck'><img src='https://duckduckgo.com/assets/_logo_next.png' alt='duck' /></a> </div> <script src="<?=$config->urls->templates;?>js/vendor/fastclick.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/jquery.js"></script> <script src="<?=$config->urls->templates;?>js/foundation.min.js"></script> <script type="text/javascript"> $(document).foundation({ orbit: { animation: 'fade', timer_speed: 8000, pause_on_hover: true, animation_speed: 500, swipe: true, resume_on_mouseout: true, slide_number: false, navigation_arrows: false, bullets: false } }); </script> <script type="text/javascript"> $('a[href*="/assets/files/"]:has(img)').addClass('th single_1'); </script> <script type="text/javascript"> $(document).ready(function() { $(".single_1").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', helpers : { title : { type : 'inside' }, overlay : { locked : false } } }); }) </script> </body> </html>
-
Just recorded a video of a larger Site I've done some already know of (in this forum). Since a long time I wanted to share something, that maybe of use to others, so here it goes. It shows some technique I use often to give shortcuts to editors when editing content on the page. It's ideal to use for summary entries to give them a direct edit link, or for data pages that have no real view and are located somewhere else in the page tree. Basicly it's simple and just requires to add Fancybox js to the front-end, and you may already have it, or if now use another lightbox that has iframe capabilities. Also if there's not lightbox plugin you need in the site, just load them conditionally using $user->isLoggedin() check. Then generate simple edit buttons/link where you like, and add a "?id=1001" to the url PW admin edit url (/processwire/page/edit/). You can do this without fancybox modal as the default basic-install shows, but using fancybox can make the experience a lot better. To have the navigation of the admin not shown you just add a &modal=1 to the url. Code to generate the year link seen in the video is: if($user->isLoggedin()){ foreach($chart_years as $year){ if($year->editable()) { // if editable by user. echo "<a class='editpage-inline' href='http://" . $config->urls->httpHost . $config->urls->admin . "page/edit/?id=". $year->id ."&modal=1'>edit ".$year->title."</a> "; } } } Then in your JScript you would add fancybox functionality to the links like this. $('a.fancybox-iframe, a.editpage-inline').fancybox({ type: 'iframe', centeronscroll: true, autoScale: true, width: 900, height: '80%' }); Minimal effort, maximal effect.
-
Hi guys, I've been running into a problem with Internet Explorer 10 and below in the backend. Whenever I upload an image and then click on the image (when it usually pops up the image in a fancybox) it just darkens the screen but the image doesn't appear. I'm wondering if anyone has encountered this before and/or has a solution for it. The attached screenshot is of IE 8. Thanks for any help. Riz
-
Here is a recent site done in processwire: http://licoriceensemble.com/ modules used include formbuilder procache cropimage version control for text fields after save actions based on a template by the great team at Elemis.
-
Hey, I want to implement a lightbox to my front-end pictures. Now I'm asking me, what would be the best practice to do this: Can I use the module "jQuery Fancybox Plugin" or do I have to use an extra *.js file? Greets Jens alias DV-JF.
-
Hi there (hoping Soma's in a good mood) I now have my images available via paginated pages fully available to Google. Happy days! Now, I want to enable Fancybox so that the whole gallery of images can be access form the same page, if the users prefers that. Here are some thoughts around approaches that I have considered : Fancybox allows you to specify an array of values at run-time that consist of image href and title values. This is preferred because I don't want to create a bunch of links on the page. This means that when I am generating the available Albums page that lists the albums that the user can see, for each Album, I will need to record/render each image URL (and any other data) for the collection of images in the Album, for as many Albums appear on the page. Whilst I am familiar with Javascript, I am not that familiar with jQuery (I've been doing JS before jQuery and Ajax emerged). I wondered where to store this data and looking at the jQuery docs, it seems that I could use its .data() method and store the data associated to each Album's link or teaser thumb img. Does this sound a reasonable way of storing the data? The idea being that if the link or image is clicked, I could build the Fancybox config array/object and then load it. I was also thinking that I could write out the values in PHP in the document.ready handler so they are handled when the page loads which might not need any storage because the handler and it contents would be generated via PHP. The other way that I have considered is doing some kind of callback to PW (maybe using Ryan's new Web Service module) and query these image details when Fancybox is called. I've found this posting http://processwire.c...wire/#entry1498 by Ryan and wondered whether this is all I need? I couldn't find any examples of the client-side Ajax call to return json from the page (just spotted it in the post) I wondered what PW best practice around this might be and any recommendations you might have for loading Fancybox using its array/object based configuration options. Thanks.
