Best Photo Gallery For Good Page Load

[hotrodsue]

Egg, thank you for taking time to share your observations and a demo.

Acorn, you just confirmed some questions I had.
Glad to know nanogallery approach will resolve the issues I’m currently fighting with when adding, deleting and rearranging pictures.

Getting ready to start my first gallery, and will start with just a few images to make sure I get the hang of it.

Will jump back on here with any questions. Will also report back when I’ve got it.

Many thanks,

Sue

[Acorn]

Egg, thank you for taking time to share your observations and a demo.
Acorn, you just confirmed some questions I had.
Glad to know nanogallery approach will resolve the issues I’m currently fighting with when adding, deleting and rearranging pictures.
Getting ready to start my first gallery, and will start with just a few images to make sure I get the hang of it.
Will jump back on here with any questions. Will also report back when I’ve got it.
Many thanks, Sue

Sue, in case you did not notice, the Builder does not retain any information so when you come to using it in anger the modification will be with a text editor on the HTML file directly. The developer did seemingly start on this but he must have veered off the idea.

Acorn

[hotrodsue]

Sue, in case you did not notice, the Builder does not retain any information so when you come to using it in anger the modification will be with a text editor on the HTML file directly. The developer did seemingly start on this but he must have veered off the idea.

Acorn

Acorn,

I just popped on here to ask questions and see that the Builder does not retain any information.
I did not notice. Thank you for bringing to my attention.
My guess is you still think this Builder is the best solution for my project?

If I'm understanding; the Builder creates code, using the files I point to saved on my URL.
Then I use a text editor on the HTML file directly. Correct?

Now on to where I'm at....

I’m stuck on using Get fills.
Is the purpose of this process to generate thumbnails? Or link to the thumbnails?

In Fill gallery, I clicked Get fills and it displays folders with Xara fills to download.
I clicked Disc fills and navigated to a folder that had images.
Attached is screen cap. Am I going in the right direction?


Also, you suggest using original image file name for better accessibility.
Do you mean image file name like IMG-8273.jpg -OR-
do you suggest naming each image, something descriptive, like commercial1.jpg?

Currently, on my computer I have multiple image folders within commercial folder.
I create a new folder inside commercial folder for each new set of pictures representing each paving job.
Open to suggestions if this is making it more complicated.

I’m very excited to move along with this project today.
I can see once I get it. It is going to be so much better. And a real timesaver.

Thanks,

Sue

[Acorn]

Acorn,

I just popped on here to ask questions and see that the Builder does not retain any information.
I did not notice. Thank you for bringing to my attention.
My guess is you still think this Builder is the best solution for my project?

If I'm understanding; the Builder creates code, using the files I point to saved on my URL.
Then I use a text editor on the HTML file directly. Correct?

Now on to where I'm at....

I’m stuck on using Get fills.
Is the purpose of this process to generate thumbnails? Or link to the thumbnails?

In Fill gallery, I clicked Get fills and it displays folders with Xara fills to download.
I clicked Disc fills and navigated to a folder that had images.
Attached is screen cap. Am I going in the right direction?


Also, you suggest using original image file name for better accessibility.
Do you mean image file name like IMG-8273.jpg -OR-
do you suggest naming each image, something descriptive, like commercial1.jpg?

Currently, on my computer I have multiple image folders within commercial folder.
I create a new folder inside commercial folder for each new set of pictures representing each paving job.
Open to suggestions if this is making it more complicated.

I’m very excited to move along with this project today.
I can see once I get it. It is going to be so much better. And a real timesaver.

Thanks,

Sue

Sue, nanogallery is still the best. Builder goes a long way to getting you started. The ng documentation would be the next step-up as i have been discovering.

Here is a demo file for 154 images all on one page.
Yes they are repeats of the same three images but I was establishing boundaries.

nanogallery - Gallery Slideshow.xar - note the file size.
Now to run this you need the external control file: Content.txt
To re-assemble, you need this text file in an adjacent folder that is called nanogallery - Gallery Slideshow_xar_files.
Now this may get a bit tricky if your design files are .WEB.
So to achieve proper linkage:

1. Open and immediately save my XAR file. It should now be a WEB file.
2. Click on the Content text, top left and in Web Properties > Link > Link to file, locate and select my Content.txt file.
3. You content file should now appear in nanogallery - Gallery Slideshow_web_files > Content.txt, beside nanogallery - Gallery Slideshow.web.
4. Save your WEB file and Preview.

You will now see a 5x4 grid with controls. There are 154 Thumbnails accessed by the bottom bars or the navifation arrows.
Click any one and you see the full image.
After 5.5 seconds it moves to the next one - I found the Slider controls and settings. Finally! Top left is the player control.

ng requires jQuery so the Black Placeholder has a Name of UseJQuery.
The Black Placeholder is a <div> tag with an ID to allow the gallery to be placed anywhere. far easier than an IFRAME.
You also have Title labels in this demo.
I did not set up for Descriptions yet.

---

I would rename to describe the image - always better.

The Get fills action to to set Xara to use your images. In doing so, a side-effect is Xara creates Thumbnails, for free.
Now, technically, the Thumbnail could just be left as the large image but boy will you get really crisp thumbs.
As the designer you need to either accept Xara's offering, ng's cover approach or bespoke each one by hand to maximise presentation impact.
If you have your images across a number of folders, you need to sit down and work out where each image and its thumb actually are.
I use a folder & file tool called Everything that allows pathing to be quickly copied. Copy and paste, by eye, is just as good.

Acorn

[hotrodsue]

Acorn, thank you for confirming nanogallery is still the best. Will check the NG documentation.

I checked the demo file you created.
Created the adjacent folder and saved the text file there.
Able to view the 5 X 4 grid with controls.

I download your Xara file and open it, I get this warning.
When I go to save, the only option is .XAR, so I did not save it as WEB.
Perhaps it’s because the version XDP Pro is different from yours.


Thank you for detailed information about the naming of the black placeholder requires jQuery.
The div tag on the image placeholder, definitely far easier than an IFRAME.
The title labels are great.
I will look at setting up for descriptions.

__________________________________________________ __________________________________________________ ___________________________

Thanks for your feedback to rename to describe the image.
Thanks for the Get fills action details.
Will better organize my image and thumbs.
I will check out the folder and files tool called Everything.

Your demo and details have given me a big head start.

For now I will plan to organize, and in the coming days I will implement nano gallery.
I may pop back on here for more direction.

Thank you,

Sue

[Acorn]

@Sue, the 'Warning' is really an 'Information' indicator.
If I had used something really fancy, it might not work on earlier versions. I haven't.

I'm pleased you're going down the JavaScript file route, it is much cleaner

Two things:

1. When you click on the Content file, it opens in a text editor so all you do is make changes and save that file.
   You do not touch the Save in the main design file as you have changed nothing.
   A fresh Preview or even browser Ctrl+F5 will show back the changes immediately.
2. The Content.txt file is still only on your local machine so Preview works.
   To get it into your published site, you need to upload the changed Content.txt, the one that is in nanogallery - Gallery Slideshow_xar_files > Content.txt.

---

Format of Content.txt:


$("#my_nanogallery2").nanogallery2({
<!-- ### gallery settings ### -->
thumbnailHeight: 128,
thumbnailWidth: 128,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
thumbnailLabel: { position: 'overImageOnBottom' },
thumbnailAlignment: 'center',
thumbnailOpenImage: true,
slideshowAutoStart: true,
slideshowDelay: 5500,
galleryDisplayMode: 'pagination',
galleryMaxRows: 4,
gallerySorting: 'random',


<!-- ### gallery content ### -->
items: [
{
src: 'berlin1.jpg', // URL to big image or video
srct: 'berlin1t.jpg', // URL to thumbnail image
tag: 'building', // Tags or keywords used for filtering
title: 'Title Image1', // Title of the media item
description: 'Description1', // Media description
},
{ src: 'berlinX.jpg', srct: 'berlinXt.jpg', tag: 'buildingX', title: 'Title ImageX', description: 'DescriptionX', },
]
});

Instructions for Gallery Settings:

1. You disable any setting by preceding it with //
2. Numbers, true & false are not quoted
3. Strings are
4. Refer to the ng user Guide for other parameters and their values
5. Note, each name-value pair always ends with a comma, even when it is the last item as you will be less likely to forget one

Instructions for Gallery Content:

1. I've included a tag - if keeping, use tag: '', for blank ones
2. You set up itemsBaseURL to point to the top folder of your images
3. Say, you have Paving 1 under that then src: 'Paving 1/slab of beauty.jpg', scrt: 'Paving 1. xarainfo/slab of beauty.png', and so on - letter case is important

ng is very flexible in its presentation at the expense of being precise with your data.
Get it working for a few images and build up.

I believe ng fully meets your needs, on which I have ticked off all ten features.

The nice thing is once you have your data in place, anyone can play around with my simple demo file and exercise ng to the full, provided you tell us the URL path and sub folders.

Acorn

[hotrodsue]

@Sue, the 'Warning' is really an 'Information' indicator.
If I had used something really fancy, it might not work on earlier versions. I haven't.

I'm pleased you're going down the JavaScript file route, it is much cleaner

Two things:

1. When you click on the Content file, it opens in a text editor so all you do is make changes and save that file.
   You do not touch the Save in the main design file as you have changed nothing.
   A fresh Preview or even browser Ctrl+F5 will show back the changes immediately.
2. The Content.txt file is still only on your local machine so Preview works.
   To get it into your published site, you need to upload the changed Content.txt, the one that is in nanogallery - Gallery Slideshow_xar_files > Content.txt.

---

Format of Content.txt:


$("#my_nanogallery2").nanogallery2({
<!-- ### gallery settings ### -->
thumbnailHeight: 128,
thumbnailWidth: 128,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
thumbnailLabel: { position: 'overImageOnBottom' },
thumbnailAlignment: 'center',
thumbnailOpenImage: true,
slideshowAutoStart: true,
slideshowDelay: 5500,
galleryDisplayMode: 'pagination',
galleryMaxRows: 4,
gallerySorting: 'random',


<!-- ### gallery content ### -->
items: [
{
src: 'berlin1.jpg', // URL to big image or video
srct: 'berlin1t.jpg', // URL to thumbnail image
tag: 'building', // Tags or keywords used for filtering
title: 'Title Image1', // Title of the media item
description: 'Description1', // Media description
},
{ src: 'berlinX.jpg', srct: 'berlinXt.jpg', tag: 'buildingX', title: 'Title ImageX', description: 'DescriptionX', },
]
});

Instructions for Gallery Settings:

1. You disable any setting by preceding it with //
2. Numbers, true & false are not quoted
3. Strings are
4. Refer to the ng user Guide for other parameters and their values
5. Note, each name-value pair always ends with a comma, even when it is the last item as you will be less likely to forget one

Instructions for Gallery Content:

1. I've included a tag - if keeping, use tag: '', for blank ones
2. You set up itemsBaseURL to point to the top folder of your images
3. Say, you have Paving 1 under that then src: 'Paving 1/slab of beauty.jpg', scrt: 'Paving 1. xarainfo/slab of beauty.png', and so on - letter case is important

ng is very flexible in its presentation at the expense of being precise with your data.
Get it working for a few images and build up.

I believe ng fully meets your needs, on which I have ticked off all ten features.

The nice thing is once you have your data in place, anyone can play around with my simple demo file and exercise ng to the full, provided you tell us the URL path and sub folders.

Acorn

Acorn,

I appreciate you answering my questions.
Your insights and detailed instructions, along with the code is much appreciated.

Looking forward to making the move to JavaScript.
It is evident that it will be much cleaner and easier

It’s great that you ticked off all 10 features to know it will fully meet my project needs.

Really nice to know once I have my data in place, anyone can play around with this of the demo file, provided I share the URL path and sub folders.

I'm sure I will be back with progress reports & questions.

Have a great evening and a wonderful weekend.

Sue

[Acorn]

@Sue, I have bundled a ZIP with all the necessary items to run 128 random images, so no need to provide you images: nano.zip.

This is a simple testbed to tweak presentation.

Construction

A. Website Code head:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

The meta is probably not needed.

B. Website Code body:

<script src="index_htm_files/Content.txt"></script>

This ensure the external data is brought into the website.

C. Placeholder Body code:

<div id="my_nanogallery2" data-nanogallery2 width=100% height=100%></div>

The Placeholder also has a Name UsesJQuery.

D. Content.txt:
Sits in the external assets folder of the design file.
Linked from text line 'Content' with Link to file.
When changing, select this 'Content' and pick Link to file: Content.txt in the pop-up.

Acorn

[Acorn]

UPDATE
In considering Variants, I have changed the filename of the former Content.txt to metadata.txt.
At the same time, metadata.txt is now just a big JavaScript variable with gallery & content data.
The nanogalleries are called from within the design for Main and Variant(s) as each gallery needs to run with a separate ID, even through they can use the same data, that metadata.txt is providing (here).

Website Head:

<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

Page Body:

<script src="index_htm_files/metadata.txt"></script>


<script>
$('#main').nanogallery2(metadata);
$('#variant').nanogallery2(metadata);
</script>

Main Placeholder:
<div id="main" data-nanogallery2 width=100% height=100%></div>
Variant Placeholder:
<div id="variant" data-nanogallery2 width=100% height=100%></div>

Don't forget UsesJQuery.

I have expanded the features of the lightbox so you now have Title & Description on hover as well as the ability to Share, Download and see the fuller Label information as a pop-up.

The new demonstrator is here: nano2.zip.
I should also mention that you really do need separate Thumbnails as using the main images as pseudo-thumbs destroys and smart lazy loading.

Acorn