Jump to content

Fancybox, jQuery and Images

Recommended Posts

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.


Edited by Gazley

Share this post

Link to post
Share on other sites

I love this kind of questions. :D

I think one simple solution would be to have the list of images loaded via ajax (bootstrap PW and return the image array) or render a js object on the album page you will simple use when opening fancybox.

Simplest solution for now (other solutions up to others slower posters):

Add a link somehwere to the album <a href="#" class="showgallery">Show Gallery</a>

The jquery will be like this.

   {href : 'img1.jpg', title : 'Title'},
   {href : 'img2.jpg', title : 'Title'}
 { ..fboptions.. }

Print that script using php and add the images string on runtime.

$imgstr = '';
foreach($images as img) $imgstr .= "{href : '".$img->url."', title : '".$img->description."'},";
$('a.showgallery').fancybox([<?php echo substr($imgstr, 0, -1); ?>], { ..fbconfig.. });

Done. Not tested but you get the idea.

Edited by Soma
stupid editor!!
  • Like 1

Share this post

Link to post
Share on other sites

Hey Soma,

Writing out the data using PHP works really well! :D -- thanks a lot!

Share this post

Link to post
Share on other sites

One other comes to mind.

If you have multiple albums on same page, you could create a js config object with the different albums images.

var albums = {
 album1 : [ {href: 'image1', title: 'Title1'}, {href: 'image2', title: 'Title2'}, ],
 album2 : [ {href: 'image1', title: 'Title1'}, {href: 'image2', title: 'Title2'}, ]

Then create the album fancybox links:

<a href="#" rel="album1" class='album-link'>Album1</a>
<a href="#" rel="album2" class='album-link'>Album2</a>

And the fancybox init script like this:

$('.album-link').bind('click', function(e){
 var name = $(this).attr('rel');
 $.fancybox( albums.name, { .. options .. });
  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By MarkE
      This post is related to 
      but is a different way of tackling the problem.
      The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:
      'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?
    • By eschoonen
      I'm working on the threaded comments on my website and for this I need to include the comments.js
      When I do this it keeps on giving me the "Uncaught ReferenceRrror: jQuery is not defined". Whatever I do it keeps giving me this error message.
      It's the last javascript file that I load in. So how do I fix it?
    • By awebcreature
      Hello there
      I need a field with realtime percent calculation (without page save)  with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! 
      Thanks in advance! 
    • By Matze
      Hi there,
      I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery.
      Anything seems to work so far, but the !$config->ajax seems to be ignored.
      To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.)
      The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function  ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. 
      So - any help with this, what am i doing wrong?

      Thanks a lot - Matze
      <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) {   //loadJquery('');   loadVanilla('');   event.preventDefault() }); function loadVanilla(url) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)');     }   };   xhttp.open("POST", "", true);   xhttp.send(); }   function loadJquery(url){ // Load content   $.ajax({       type: "POST",       url: url,       data: { ajax: true },       success: function(data,status){         pageData = data;       }   }).done(function(){ // when finished and successful     document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)';   }); } </script> <?php endif; // end if not ajax ?>  
  • Create New...