fancybox gallery

initial figuring-out (no 11ty)

1. make a div to contain all the pics and give it a name. i called it “dannyCommunity” but it can literally be anything i think

dannyGallery.html

<div id="dannyCommunity">
</div>

2. add the pics.

dannyGallery.html

<div id="dannyCommunity">
	<a href="/images/danny/community/a1.jpg"><img src="/images/danny/community/a1.jpg" /></a>
	
	<a href="/images/danny/community/a2.jpg"><img src="/images/danny/community/a2.jpg" /></a>
	
	<a href="/images/danny/community/a3.jpg"><img src="/images/danny/community/a3.jpg" /></a>
	
	<a href="/images/danny/community/a4.jpg" data-caption="i'm not arguing with a man with big brown doe eyes. whatever you say beautiful"><img src="/images/danny/community/a4.jpg" /></a>
</div>

3. invoke fancybox

dannyGallery.html

<div id="dannyCommunity">
	...
</div>

<script>
	
	Fancybox.bind("#dannyCommunity a", {
		groupAll: true,
		
		// Disable image zoom animation on opening and closing
		Images : {
		zoom : false
		}
	});
	
</script>

• group all means anything within the fuckin #dannyCommunity tag that has an a value. all those images get put in one gallery, so you can use the arrows to go to the next image seamlessly.
  • see grouping for more options on how to do this.
• the images one just prevents a slow ass zoom animation. it just fades up from bottom instead. yippee!

4. add styling to the images that have captions so people know to click on em for commentary or whatever

dannyStyles.css

a[data-caption] img {
	border: 2px solid red;
}

---

THE TRUE WAY!!! (with 11ty)

1. make the div.
2. make a .json file in the _data folder to contain the picture links.

danny.json

[
	{
		"folder":"community",
		"path": "a1"
	},
	{
		"folder":"community",
		"path": "a2"
	},
	{
		"folder":"community",
		"path": "a3"
	},
	{
		"folder":"community",
		"path": "a4",
		"caption":"i'm not arguing with a man with big brown doe eyes. whatever you say beautiful"
	}
]

the above setup assumes the following:

• all images are in the same file ext (.jpg)
• all images follow the same file path (/images/danny/folder/path.jpg) change shit if that’s not accurate to your current setup.

3. write the for loop.

dannyGallery.html

<div id="gallery">
	{% for image in danny %}
	<a href="/images/danny/{{ image.folder }}/{{ image.path }}.jpg"><img src="/images/danny/{{ image.folder }}/{{ image.path }}.jpg" /></a>
	{% endfor %}
</div>

in which in {% for image in danny %}:

• “image” is just whatever variable you want to define it as. it could be “butthole” for all i care. just define something
• “danny” refers to the danny.json file

4. add a conditional for if the thing has a caption.

dannyGallery.html

<div id="gallery">
	{% for image in danny %}
	<a href="/images/danny/{{ image.folder }}/{{ image.path }}.jpg" {% if image.caption %}data-caption="{{ image.caption }}"{% endif %}><img src="/images/danny/{{ image.folder }}/{{ image.path }}.jpg" /></a>
	{% endfor %}
</div>

optional: add a conditional for the folder (i just put all my danny images in one json file)

• you cannot do this. the pagination will include even images that it skips over… OH WAIT
  • no yeah you can’t.

5. once again, add styling to the images that have captions, so people know to click on ‘em for commentary or whatever

dannyStyles.css

a[data-caption] img {
	border: 2px solid red;
}

add pagination

add this to front matter

pagination:
	data: danny
	size: 40
permalink: "danny/pictures/community/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}index.html"

in which:

• size refers to how many items per page
• data refers to the global data filename (in this case, danny.json)
• re: permalink… i have no idea how to parse that. i probably copied and pasted that conditional. anyway, all you have to know is that the results are as follows:
  • the first page will just render as danny/pictures/community/index.html
  • any succeeding pages will show up as danny/pictures/community/page-2/index.html in which 2 is. whatever the page number is