Creating a Photo gallery with the new FancyBox Jquery script

pwired · September 9, 2018

Hi,

I uploaded a simple Processwire theme for the Lightbox2 picture gallery

http://lightbox2.rf.gd/

==========================================================

I will make the site folder and the database available in an hour
for your own local development.

Greetings
Pw

PhotoWebMax · September 9, 2018

I am running a local MAMP install of PW 3.0.98

I stripped out a bunch of stuff like the sidebar, breadcrumbs, and search, etc.

When I tried once to upload photos to the text editor I got a strange error message saying request denied because it was "forged" or something? I loose out and logged back in and did not see that error again (yet).

This is my folder structure:

The _head.php file:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $page->title; ?></title>
	<meta name="description" content="<?php echo $page->summary; ?>" />
	<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/test.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>lightbox/css/lightbox.css" />
			<!-- JS -->
			<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
			<script src="<?php echo $config->urls->templates?>lightbox/js/lightbox.min.js"></script>
			</head>
	</head>
<body>
<!-- top navigation -->
	<ul class='topnav' role='navigation'><?php

		// top navigation consists of homepage and its visible children
		$homepage = $pages->get('/'); 
		$children = $homepage->children();

		// make 'home' the first item in the navigation
		$children->prepend($homepage); 

		// render an <li> for each top navigation item
		foreach($children as $child) {
			if($child->id == $page->rootParent->id) {
				// this $child page is currently being viewed (or one of it's children/descendents)
				// so we highlight it as the current page in the navigation
				echo "<li class='current' aria-current='true'><span class='visually-hidden'>Current page: </span><a href='$child->url'>$child->title</a></li>";
			} else {
				echo "<li><a href='$child->url'>$child->title</a></li>";
			}
		}
      ?></ul>
 </div>

The basic-page.php file:

<?php

include('./_head.php'); // include header markup ?>

	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
	
		// output bodycopy
		echo $page->body; 
		
		
		
		// TIP: Notice that this <div id='content'> section is
		// identical between home.php and basic-page.php. You may
		// want to move this to a separate file, like _content.php
		// and then include('./_content.php'); here instead, on both
		// the home.php and basic-page.php template files. Then when
		// you make yet more templates that need the same thing, you
		// can simply include() it from them.
	
	?></div><!-- end content -->		
	

<?php include('./_foot.php'); // include footer markup ?>

The gallery.php file:

<?php

include('./_head.php'); // include header markup ?>

	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
	
		
		
	
	



// gallery.php template file 

// Primary content is the page's images gallery
$gallery = '';

// if there are images, lets choose them to create an image gallery
if(count($page->images)) {
	$cnt = 1;
	// if the page has images grab 'em
    $images = $page->images;

    foreach ($images as $image) {        
        // create/get image thumbs
        $thumb = $image->size(150,150);        
        // add image to gallery        
        $gallery .=
            // @note: unique data-lightbox value! (for single images according to docs)
            // link to full image
            "<a href='$image->url' data-lightbox='image-{$cnt}'>" .
                // image thumb
                "<img src='$thumb->url' alt='$image->description' />
            </a>";
        $cnt++;
    }
	
} else {
	// no images... 
	$gallery .= '<p>Sorry, there are no images in this gallery</p>'; 
}
// append gallery and body markup
$content = $gallery; 
$content .= $page->body;

?></div><!-- end content -->

The three pages will load fine. I use the basic-page.php for the two normal test pages and all is good: the minimal content I expect is there.

The Portfolio page is using the gallery.php template with has the title, headline, body and images fields.

No pictures or thumbs show at all. I am sure this is operator error (ME)...

kongondo · September 9, 2018

31 minutes ago, PhotoWebMax said:

No pictures or thumbs show at all. I am sure this is operator error (ME)...

This is because you are not echoing out the gallery at all :-). I see you are using a different template approach from my example (direct output with includes). My approach is delayed output. So, you need to do this in your gallery.php:

replace:

// append gallery and body markup
$content = $gallery; 
$content .= $page->body;

with:

// echo gallery and body markup
echo $gallery; 
echo $page->body;

That will echo the gallery before the body content. Switch them around if you need to.

Edited September 9, 2018 by kongondo

pwired · September 9, 2018

Hi,

I attached with this post the site folder and the database of the theme I have put online here:

http://lightbox2.rf.gd

Just unzip site-folder.zip

Don't forget to put your own database credentials in the config.php file

Greetings.

site-folder.zip

PhotoWebMax · September 9, 2018

Thanks Pwired! I will take a look at this. In fact I think I will build a new test install to see how it differs from Kongodo's work! ?

Kongondo: thanks for catching that error. I would never have zoomed in on that issue.

The good news is that the three test uploaded images now show as thumbs on the page! And when you click on one you get the Lightbox doing its thing. Yay! Progress!!

But one issue: the image has this odd extra box strip on the right side of the image? And there is no previous/next navigation on the images? The other thing I am doing differently than your example is that I am linking to the latest jquery script directly (not linking to a file in my template folder) and I am not using the combined Lightbox and jquery lightbox-plus-jquery.min.js file. Instead I am using just the Lightbox.min.js file. Could this be a conflict or something? <edit: I tried the combined jquery file link and that does not change the result...>

PhotoWebMax · September 9, 2018

I noticed that the markup that is generated shows that the img tag lists the individual image number like this:
data-lightbox='image-2'

I changed the template from this:

 "<a href='$image->url' data-lightbox='image-{$cnt}'>" .

to this:

"<a href='$image->url' data-lightbox='image-group'>" .

Doing so now adds the group previous/next navigation. But that odd box on the right end of the full size images is still there. I will try dumping the images and uploading them again...

<edit: I dumped the images and uploaded them again and that extra box is still there? A headscratcher: never seen this before...>

kongondo · September 10, 2018

19 minutes ago, PhotoWebMax said:

I noticed that the markup that is generated shows that the img tag lists the individual image number like this:
data-lightbox='image-2'

Yes. That's because my example was for single images. I noted as much in my gallery.php code ?

Quote


// @note: unique data-lightbox value! (for single images according to docs)

For groups/image sets you do it like you now have. Prev/next only work with sets. If using sets/groups, you can delete the $c variable from the script. I have no idea about the odd box error though.

PhotoWebMax · September 10, 2018

Good to know, thanks!

I need to test this in a different browser? I am using Safari on my desktop Mac. Maybe a CSS issue?

This is what shows up on my sample test:

<div id='content'><h1>Portfolio</h1><h2>Gallery with Lightbox2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Duis viverra diam non justo. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Nullam eget nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean placerat. Cras elementum. In convallis. Proin in tellus sit amet nibh dignissim sagittis. Nullam eget nisl. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce tellus.</p><a href='/SRP_2018/site/assets/files/1014/big_1.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_1.150x150.jpg' alt='Gary on Orcas' />
            </a><a href='/SRP_2018/site/assets/files/1014/big_2.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_2.150x150.jpg' alt='Spot prawns' />
            </a><a href='/SRP_2018/site/assets/files/1014/big_3.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_3.150x150.jpg' alt='Good old Portia' />
            </a></div><!-- end content -->

I added a brief caption in the description of each image. When the script runs it is not displaying the caption/description?

kongondo · September 10, 2018

5 hours ago, PhotoWebMax said:

I added a brief caption in the description of each image. When the script runs it is not displaying the caption/description?

Please read the lightbox docs :-). How to achieve this is explained there.

PhotoWebMax · September 10, 2018

OK, got the caption and alt system working.

Still trying to track down the unwanted extra box on the right side of the full size images. Messing around with the Lightbox CCS is not fixing this. I looked at the images field settings but don't really see anything that would trigger this?

pwired · September 10, 2018

Can you tunnel from your laptop your local website online ? Or sync your local website with an online host ? It will be more easy if we can see the setup online.

PhotoWebMax · September 10, 2018

3 minutes ago, pwired said:

Can you tunnel from your laptop your local website online ? Or sync your local website with an online host ? It will be more easy if we can see the setup online.

The test site is just local right now. The odd thing is if I make ANY test edits to the lightbox.css file and then reload my gallery page the script presentation remains the same. A caching issue?

I did find this: https://stackoverflow.com/questions/51016622/jquery-lightbox-2-showing-border-in-random-images

pwired · September 10, 2018

Quote

A caching issue?

Check if you reload an old still open page and not the one you are editing. It happened to me ?

PhotoWebMax · September 10, 2018

Ok, I came back and gave it another go. Fiddled with and fiddled with that.

I made a couple of changes to the lightbox.css that comes with the default Lightbox2 archive. Starting on line 37 I made the border thinner and added a padding:0 like so...

 /* Image border */
  border: 2px solid white;
  padding:0;

On my local test install this has killed the unwanted transparent box that appeared on the right side of every full size image when presented by the script. I think the thinner border looks better as well.

I am not sure if this is a real bug or something that is just happening to me?

I really, really, really appreciate the help of pwired and Kongondo with helping me unravel this issue. Thank you both!

It is interesting how each of the approaches were both similar and quite different. The critical code for the gallery template is quite different. I plan on playing with both. I also need to check back with a previous install to get some multiple galleries to appear on the same page, but that will be for a new day...

PhotoWebMax · September 10, 2018

Another head puzzler from the above post:

When I was trying to get this to work I changed the name of the Lightbox css file from lightbox.css to xlightbox.css and changed the link in my head like this:

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>lightbox/css/xlightbox.css" />

This was to preserve the default css file. Once I made the above changes to the css border value and found it working I then dropped the "x" from the head link and the name of the actual file while keeping the change to the border. But the unwanted side box gap reappeared. I added the "x" back in and the box is gone. ???

ottogal · September 11, 2018

Hi PhotoWebMax,

this could be just a cache issue, I presume.

BTW, there are quite a few former MODX users in this community (like me and you - I remember your contributions in their forums years ago - , and of course kongondo and others. What I'd like to say: Don't let you get discouraged in using PW just because of some fiddling issues with a gallery script which will be solved and have nothing to do with PW. Having found PW several years ago I quit using MODX from one day to the other and never looked back.

Good luck!

Edited September 11, 2018 by ottogal
Typo

PhotoWebMax · September 11, 2018

Thanks for that...

Before CMS systems became a "thing" I was pretty active in designing and working with modern web standards static sites. But my day job was photography. I tried a bunch of systems before setting on the first branch of MODx, namely Evo. The thing I liked about MODx was that it was easier to design custom sites that fit into the structure. What was confusing to me (and many others) was the reliance on system syntax specific "chunks" and a hard to to grapple navigation system. Wayfinder was powerful but a pain. Kongondo was one of THE best MODx contributors back then. Especially with helping to build the community knowledge and comfort level with creating flexible and complicated connections between pages. But I sort of felt that the creation of the new branch of MODx, namely Revo, made the whole thing sort of awkward? The two different branches happening at the same time, etc. It changed the focus, and key guys went in new directions.

Processwire wire is a vastly superior product. I can still design things on paper and use the very flexible template and field combination without fighting the whole structure. My issue has been a long standing limitation: I just could never learn to code PHP and Javascript, etc. I tried but just never gave it the commitment required. For many these skills come easily. Not for me.

Looking back one of my frustrations with my early MODx days was getting elegant looking dynamic image galleries to work. I guess some things never change? MaxiGallery had promise but it was a pain to work with. The cool thing with Concrete5 is that it comes with a nice paginated and functioning gallery system, plus a blog system, etc, all without having to use a front end plus a back end editing routine. But the issue is how easy is it to customize a theme or deploy a custom design? There is always a road block with any system it seems.

The other thing I like about Processwire is the size of the whole project and the community. Wordpress and Drupal have massive numbers but that can add confusion, too many choices and doubts as to how long the widget you are deploying will be actively maintained. Some systems have too little community evolvement and support. Processwire just has a nice balance.

pwired · September 11, 2018

Yep we all know what happened back then with evo and revo. When they shut down evo and with revo a total no go I was bouncing over the internet for weeks desperately trying out dozens of cms systems. Seeing that Processwire lets you utilize any level of experience you already have with html and php and apply it in your own way was really the trigger to run with it.

pwired · September 11, 2018

Quote

I just could never learn to code PHP and Javascript

If you are a photographer there is no need to learn to code in Javascript. All you need is to tweak some library parameters and they are already well explained with examples that come with the library, e.g. all the picture galleries out there.

As for php, for picture galleries you only need to know basic php like for each which you can reuse in other picture galleries.

pwired · April 13, 2019

I just so noticed that fancybox version 3 is available,
The new layout and interface looks really great:
https://github.com/fancyapps/fancyBox

Sign In

Creating a Photo gallery with the new FancyBox Jquery script

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members