Lets say we have a long list of posts on a single page. Each of those posts has a hidden
div with multiple
img tags inside it. When a user clicks on the post, the images inside the hidden
div should be showcased in a modal gallery.
Which approach is better SEO-wise - outputting the Bootstrap modal + image gallery markup for each post and unhiding it whenever the user clicks on the post, or having a single hidden modal and
clone()'ing images to it?
I'm leaning towards the first solution because it is way easier to implement. The second one requires listening to DOM events as I should only initialize the gallery after the images have been cloned to the gallery
div inside the modal and thus is a bit trickier. Also, I'm not so keen about copying DOM nodes here and there.
Which is the better approach?
EDIT: I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?