Jump to content

Creating a Photo gallery with the new FancyBox Jquery script


PhotoWebMax
 Share

Recommended Posts

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:

 

folders.thumb.jpg.f94a1acc9966719a7793f1d6e29174b1.jpg

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)...

 

 

 

Link to comment
Share on other sites

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 by kongondo
Link to comment
Share on other sites

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...>

shrimp_gap.thumb.jpeg.38eb3969da20913654773c69c3bb7326.jpeg

 

 

  • Like 1
Link to comment
Share on other sites

 

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...> 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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. ???

Link to comment
Share on other sites

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 by ottogal
Typo
  • Like 2
Link to comment
Share on other sites

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. 

 

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 7 months later...

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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...