Jump to content

Creating a Photo gallery with the new FancyBox Jquery script

PhotoWebMax

By PhotoWebMax,
in General Support

 Share

Recommended Posts

PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

Hi All,

 

I have not really touched Processwire if a few years. Some of old MODx and Processwire sites have to be updated. One of my sites was built using a gallery system with FancyBox. The thumbs no longer work and the older system is no longer supported. I am going to tackle using the new FancyBox v3.3. I have built a super basic test site on MAMP so that I can get reacquainted with doing all this again.
 

Before I get ahead of my skis is there a recent consensus on building a Lightbox gallery system using Processwire? A fresh tut perhaps?

 

Thanks,

 

Max

 

Link to comment
Share on other sites
dragan Hero Member

dragan

Posted
Posted
11 hours ago, PhotoWebMax said:

The thumbs no longer work

Do you get error messages? Activate debug-mode and see if you get errors. Perhaps also install Tracy Debugger. "it doesn't work" is not a helpful bug-report ?

If you show us the lines of code you're using and the corresponding error messages, we might be able to help.

11 hours ago, PhotoWebMax said:

is there a recent consensus on building a Lightbox gallery system using Processwire?

Not that I'm aware of. afaik there hasn't changed that much in terms of image-handling in PW. Additions and modules: yes, but the basic API methods still work the same.

I can recommend this script: http://photoswipe.com/

It doesn't depend on jQuery or any other framework, it's vanilla JS, and very flexible.

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted

Ok, I am feeling like a dumb student after coming back to algebra after four years: I have forgotten to do most things here.

I tried the above module but I am lost on how to to set it up and get it working. 

I thought I would try two things:

1) Create a super basic stripped down folder to get a static (away form Processwire) html test page to present a basic three image slide show using FancyBox. I came up with this and it works fine. I created and named the full size and thumbnail images directly with Photoshop.  

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>
<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css">
	<!-- JS -->
		<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
</head>
<body>

	<h1>Huge Headline</h1>

	<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
	<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
	<a data-fancybox="gallery" href="big_3.jpg"><img src="small_3.jpg"></a>
	
	
</body>
</html>

 

2) Create a fresh local (MAMP) install of the the latest Processwire with a test gallery page using the PW image Field. This works. I can upload images and fiddle with the thumbnails, etc. All that happens when you click on a thumbnail: it takes you to a blank page that presents the individual full size image: 

...


<div id="gallery">
		<?php

		foreach($page->images as $image) {
	      // https://processwire.com/api/fieldtypes/images/
	      // set some default image options
	      $options = array('quality' => 90, 'cropping' => 'center');
		   $thumbnail = $image->size(150,150, $options);
		   echo "<a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a>";
		}
	
		?>
		
	</div><!--gallery ends-->
...

What I would like to do is combine these: Use the Processwire system to upload and customize thumbnails, present the thumbnails in a nice clean grid and then have FancyBox take over with presenting a floating end user slideshow. I also hope to strip down the CSS to just the presentation I need.

Any guidance would be most welcome. I have zero PHP skills so this is always an uphill battle for me. But I have achieved results in the past...

 

Link to comment
Share on other sites
  • 3 weeks later...
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted

I have upgraded two of my sites to the most recent versions of Processwire. These are basic photo gallery sites. I have tried a bunch of things to get a basic thumbnail - gallery presentation to work with Processwire. But my thumbs will not display with the fancyBox script I am using. Other attempts with different scripts have not worked for me either. 

I am at the very end here: I have downloaded Concrete5 locally on MAMP and I get a full working system with gallery, blog and contact form. For me it might best to tweak the themes here and work on my content instead of fighting the CMS system itself. I fear Processwire might be more for developers than for where I am at currently?

Any last suggestions before I scrap everything and start fresh with a new system?

 

Thanks!

Link to comment
Share on other sites
pwired Hero Member

pwired

Posted
Posted
Quote

I fear Processwire might be more for developers than for where I am at currently?
Any last suggestions before I scrap everything and start fresh with a new system?

Dear PhotoWebMax,

First of, the thing with out of the box systems like concrete5 that you are mentioning, or wordpress or whatever
out of the box stuff out there, you will have to work with the set of rules that is limited to the system
being used.

Processwire doesn't have any rules nor limitations and lets you work your own personal way, or any way you want
without any limitations.

I also want to put your attention on that, besides fancybox and lightbox,
there are the following picture galleries who are really worth while using
because they present photos in a gallery in a real nice way:

lightgallery
lightbox2
slimbox2
colorbox
prettyphoto

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

Coming back on what it boils down to with Processwire.

First you have to create view size and thumbnails of your pictures. But that you already know.
Photoshop is ok but there are tools out there who can create automatically view size and thumbnails
much faster than you can do with photoshop.

One important issue here:
With Processwire you do not have to create viewsize and thumbnails with Photoshop or some other picture tool.
Processwire creates the viewsize and thumnails automatically for you at runtime gallery output.
Here is an example how Processwire lets you do that: 

$view = $image->width(700);
$thumb = $image->size(100, 100);
$title = $image->description;

 

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

All you have to do is to download fancybox, lightbox, or whatever gallery you want
to use and first setup a working gallery in html only with a few example pictures
and then have a look at the web code examples that the specific gallery is using.


Here is an example in case you would use the colorbox picture gallery 

<div class="row">
   <div class="col colorbox-gallery">

    <a class='group4' href='img/1.jpg' title="your title."><img src="img/thumb1.jpg" alt=""></a>
    <a class='group4' href='img/2.jpg' title="your title."><img src="img/thumb2.jpg" alt=""></a>
    <a class='group4' href='img/3.jpg' title="your title."><img src="img/thumb3.jpg" alt=""></a>
    <a class='group4' href='img/4.jpg' title="your title."><img src="img/thumb4.jpg" alt=""></a>
    
   </div>
</div>

 

In Processwire all you have to do, is to use a for each loop to output all the lines <a class ........ >  ......  </a>
for all the pictures you have in the processwire backend.
At the bottom you put this little script to initiate the colorbox gallery:

  

<script>
     $(document).ready(function(){
      $('.group4').colorbox({rel:'group4', slideshow:true, closeButton:true, transition:'elastic', speed:600});
    });
</script>

 

You will already see this script in the example that comes with the colorbox gallery.

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

Here is another web code example that comes with the slimbox2 gallery 

<div id="">
                
                <a href="images/001.jpg" rel="lightbox-cats" title="This Is My Image Caption" >
                  <img src="images/001-thumb.jpg" alt="remember your alt tag" />
                </a>
               
                <a href="images/002.jpg" rel="lightbox-cats" >
                  <img src="images/002-thumb.jpg" alt="remember your alt tag" />
                </a>
               
                <a href="images/003.jpg" rel="lightbox-cats" >
                  <img src="images/003-thumb.jpg" alt="remember your alt tag" />
                </a>

                <a href="images/004.jpg" rel="lightbox-cats" >
                  <img src="images/004-thumb.jpg" alt="remember your alt tag" />
                </a>

</div>

 

Same thing, all you have to do is to use a for each loop in Processwire to output all the lines <a ..... >  .......  </a>


So that's actually it
Greetings and have a nice weekend

 

  • Like 6
Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted

Thanks Guys...

 

I am not sure what happened but I think the older version of FancyBox has been downgraded and a fresh branch of the project has been put in place. (I actually helped the developer with graphics way back in the early stages of FancyBox.) But I have a couple of updated PW sites that will not display thumbnails at all. When I built this years ago I created (with lots of help from PW forum members and following tuts) a seemingly complicated system of galleryPage, galleryPost, galleryBlogPost, parentPost, etc, PHP and Include template files. The new version of FancyBox spits out different code and does not use the same jquery and css files as before. But either a host server script upgrade or the new update to PW itself is breaking my gallery system. 

I am no longer going to do any web development for clients. It takes a commitment to stay on top of malware misery and system updates. I do have a couple of older client sites that run on MODx Revo, but the owners don't like the backend manager system. I showed them both Processwire and Concrete5 and Concrete5 was better received. I have not deployed a live Concrete5 site, just messing around with a local MAMP install. So far I Iike how a full polished gallery system, blog and Contact form is all there in place without having to code PHP template files. I understand how you guys apprentice the flexibility of PW here, but I am beginning to doubt my ability and commitment for doing this over time moving forward?


That being said it sort of really irks me that I can't get a basic chore like a picture gallery system running on a modern CMS that I have spent real time with! This is more to do with my ability and commitment and not the system itself. I would like to figure this out, even if it just helps me confirm in my mind which system I should settle on. I want to be in a more simple and less frustrating place ultimately...

Link to comment
Share on other sites
pwired Hero Member

pwired

Posted
Posted
Quote

The new version of FancyBox spits out different code and does not use the same jquery and css files as before.

Hi,

If you need the old version of Fancybox, I still have it and can send it over in case you are still interested.

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted

I really do not know PHP, which I think ultimately is the major issue for me.

I added a path to the Lightbox css file in my template  and added the following to my basic-page.php template: 

<div class="galleryTest">
		<?php

		foreach($page->images as $image) {
	      // https://processwire.com/api/fieldtypes/images/
	      // set some default image options
	      $options = array('quality' => 90, 'cropping' => 'center');
		   $thumbnail = $image->size(150,150, $options);
		   echo "<a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a>";
		}
	
		?>
		<script type='text/javascript' src="<?php echo $config->urls->templates?>lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.galleryTest').lightbox();
		    });
		</script>
			
			
	</div><!--galleryTest ends-->

The page looks fine. The thumbnails (via Proceswire) are there but the script is not doing its thing to the pictures. Clicking on a thumb just takes you to the full size image on a blank page. I think this is due to me using the class GalleryTest inside the function? I don't know what is needed though?

 

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted

If I look at the markup that is generated on the page I see the code for the script is there? 

I get the following: 

<div class="galleryTest">
		<a href='/SRP_2018/site/assets/files/1014/orcas_gary.jpg'><img src='/SRP_2018/site/assets/files/1014/orcas_gary.150x150.jpg' alt='Gary on Orcas Island' ></a><a href='/SRP_2018/site/assets/files/1014/portia_at_chucks.jpg'><img src='/SRP_2018/site/assets/files/1014/portia_at_chucks.150x150.jpg' alt='Portia' ></a><a href='/SRP_2018/site/assets/files/1014/spotprawns.jpg'><img src='/SRP_2018/site/assets/files/1014/spotprawns.150x150.jpg' alt='Spot Prawns' ></a>		<script type='text/javascript' src="/SRP_2018/site/templates/lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.image').lightbox();
		    });
		</script>
			
			
	</div><!--galleryTest ends-->

 

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
  • Author
Posted
8 minutes ago, pwired said:

That script should be outside the  


<div class="galleryTest">

and put at the bottom just before the </body> tag

Ok, I removed the script from the basic-page.php file and added it to the bottom of the footer file like so: 

<!-- footer -->
	<footer id='footer' role="contentinfo">
		<p>all photographs, renderings and designs copyrighted &copy; by xxx &#124;&#124; all rights reserved &#124;&#124; 2018<br/>Powered by <a href='http://processwire.com'>ProcessWire CMS</a>  &nbsp; / &nbsp; 
				<a href='/pwadminmax/'>Admin Login</a></p>
	</footer>
		<script type='text/javascript' src="<?php echo $config->urls->templates?>lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.galleryTest').lightbox();
		    });
		</script>
</body>
</html>

The script is still not working on the images though.

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

I've tested lightbox2 and it works fine.

I am using the Initialize with HTML as per the docs. You don't have to call the script manually on the page unless you are passing options.  You will need to set data-lightbox attribute to each <a> element. 

The following is based on a fresh PW install that uses the _main.php, _init.php, etc, approach, but it should work regardless of your templating approach.

_main.php

This is where we will output our markup. It is also where we include the CSS and JS for lightbox2

In this example, JS is included in <head>. Move it as you wish. Note the locations of the CSS and JS in this example. Your paths could be different. I uploaded the script's images to /site/templates/images/.  This _main.php is the one found here in a ProcessWire install. 

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/lightbox.min.css" />
<script src="<?php echo $config->urls->templates?>scripts/lightbox-plus-jquery.min.js"></script>

gallery.php

I created a template file called gallery.php and a template called gallery. I then created a page that uses this template and uploaded some images. The images field in the template is called images. The contents of gallery.php are below. It is similar to the code in basic-page.php found in this ProcessWire install. If using a different template approach, you can just echo out the value of $gallery, for instance. 

<?php namespace ProcessWire;

// 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;

That's it! If you view the page, you should have a working gallery.

Demo

lightbox2-pw-demo.thumb.gif.788b578b6e41367803b9daf45fb4c84f.gif

  • Like 4
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted (edited)
22 minutes ago, PhotoWebMax said:

Tried to implement Kongondo's work into my template but I am obviously missing something. I don't a get a thumbnail, just the full size image on the page and no script activation at all?

  • Any errors in dev tools? Maybe a JS file not getting loaded?
  • Are you using PW 3?
  • Could you please post the full contents of your template file + any other template file it includes?
  • Please post the full markup generated for the gallery
  • Any PHP errors?
  • Do you have ProcessWire debug on?
  • Is the site live or local?
Edited by kongondo
Link to comment
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
 Share
Go to topic listing

  • Recently Browsing   0 members

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