question/feature_request(markup): disable wrapper

[Kristinita]

1. Summary

I couldn’t find, how I can make Chocolat markup more simple.

2. Example

2.1. Current

<div class="chocolat-parent">
    <a class="chocolat-image" href="https://kristinita.netlify.app/images/header/KristinitaLuckyLink.webp">
        <img src="https://kristinita.netlify.app/images/header/KristinitaLuckyLink.webp" />
    </a>
</div>

I use the same URL in a.href and img.src attributes.

2.2. Desired

<div class="chocolat-parent">
    <img class="chocolat-image" src="https://kristinita.netlify.app/images/header/KristinitaLuckyLink.webp" />
</div>

No <a> wrapper.

3. Argumentation

3.1. DRY

Don’t repeat yourself. Currently, I use the same image path, but 2 tags.

3.2. DOM size

Large DOM tree may be not good. Lighthouse reports if web page DOM size too big. Using 2 tags instead of 3 we can reduce it.

4. Related questions

See the similar question for Fancybox on the Stack Overflow.

Thanks.

[nicolas-t]

Hello,

If you are optimizing your DOM size then you should also consider optimizing your images by reducing their size.
Thankfully Chocolat's markup allows you to show a thumbnail different from the image in the lightbox.

If you really don't like this markup you can use Chocolat's API

Chocolat/demo/index.html

Lines 158 to 196 in 66b2fb4

	var instance = Chocolat([
	{src : 'demo-images/1.jpg', title : 'caption 1'},
	{src : 'demo-images/6.jpg', title : 'caption 2'},
	{src : 'demo-images/8.jpg', title : 'caption 3'},
	], {
	setTitle : function () { return 'set title' },
	loop: true,
	imageSize : 'contain',
	container: document.querySelector('#container3'),
	afterMarkup: function () {
	console.log('afterMarkup hook is called')
	},
	afterImageLoad: function () {
	console.log('afterImageLoad hook is called')
	},
	afterInitialize: function () {
	console.log('afterInitialize hook is called')
	},
	zoomedPaddingX: function (imgWidth, canvasWidth) {
	// add a padding around the zoomed image
	// default to 0
	return canvasWidth / 4;
	},
	zoomedPaddingY: function (imgHeight, canvasHeight) {
	// add a padding around the zoomed image
	// default to 0
	return canvasHeight / 4;
	}
	});
	document.querySelector('.api-open').addEventListener('click', function(e) {
	e.preventDefault()
	console.log('open start');
	var promise = instance.api.open()
	promise.then(function(){
	console.log('open done');
	})
	})

But beware, parsing and evaluating javascript is also costly in terms of browser resources.

Feel free to reopen if you need help using the API syntax

[Kristinita]

Status: Need more info 🤔

1. Problem

Feel free to reopen if you need help using the API syntax

Yes, I would love to get help on the API syntax). Currently, I don’t really understand how I can use markup as in 2.2 item of my issue using Chocolat API. Excuse me, can you show the minimal JavaScript example?

2. Accessory replies

If you are optimizing your DOM size then you should also consider optimizing your images by reducing their size. (…)

But beware, parsing and evaluating javascript is also costly in terms of browser resources.

Yes I understand this. Thank you for the reminding.

[nicolas-t]

Hello,

Currently, I don’t really understand how I can use markup as in 2.2 item of my issue using Chocolat API.

The point of the API is to get rid of the DOM, you pass the images as a javascript array instead of reading them from the DOM.

can you show the minimal JavaScript example?

You we'll find an example in this file (the last example) :
https://github.com/nicolas-t/Chocolat/blob/66b2fb4fe16c6ed392929b5a874817b5939673fa/demo/index.html