@Egg, the difference is yours relies on JavaScript and mine is handled natively by the browser; less to go wrong across different browsers.
Yours is limited to the varying contents of the array for the image, title and description. Mine is still mainly Xara-driven and can be embellished as I tried to show: links, transparencies, delays & animations so I consider my approach an enhancement.
The Thumbs as Placeholders were pure red herrings as I said anything could be the trigger (Bullet 4); I was trying to given pause for people to consider what they could do.
Your point on having many pop-up layers is valid but the weight of them is trivial so the file size will grow slowly and there is next to no abstraction of the presentation of content. You can even drop the image into the Layer, set to Thumbnail size and Optimise. You then make it full size and the images is blurry but good enough to know what it is. When you add the Placeholder code, even that does not get published. The design file is then around 50kB larger; 100 images would add 5MB to the design file size.
For your approach, it can be refactored to:
array-1.js:
Code:
var photo = new Array();
photo[0] = ["https://parkeston.com/xara/big-images/images/myImg@2x.jpg","title-0","s0 "];
photo[1] = ["https://parkeston.com/xara/big-images/images/1001@2x.webp","title-1","s1 "];
photo[2] = ["https://parkeston.com/xara/big-images/images/1002@2x.webp","title-2","s2 "];
photo[3] = ["https://parkeston.com/xara/big-images/images/1003@2x.jpg", "title-3","s3 "];
photo[4] = ["https://parkeston.com/xara/big-images/images/1004@2x.jpg", "title-4","s4 "];
photo[5] = ["https://parkeston.com/xara/big-images/images/1005@2x.jpg", "title-5","s5 "];
photo[6] = ["https://parkeston.com/xara/big-images/images/1006@2x.jpg", "title-6","s6 "];
photo[7] = ["https://parkeston.com/xara/big-images/images/1007@2x.jpg", "title-7","s7 "];
photo[8] = ["https://parkeston.com/xara/big-images/images/1008@2x.jpg", "title-8","s8 "];
photo[9] = ["https://parkeston.com/xara/big-images/images/1009@2x.jpg", "title-9","s9 "];
Then functions.js is simply:
Code:
function Photo(n) {
document.getElementById("photourl").innerHTML = photo[n][0];
document.getElementById("phototitle").innerHTML = photo[n][1];
document.getElementById("spare2").innerHTML = photo[n][2];
document.getElementById("myImg").src = photo[n][0];
}
Your Links then become: <a href="javascript:xr_cpu(4);%20Photo(0);" onclick="return(xr_nn());"> for the first and changing the index to display each other image and associated contents.
Your use of IDs for the placeholder objects will however fail for Variant use (photourl, phototile, spare2 & myImg). You could change the IDs to ClassNames and tweak the get statements to getElementsbyClassName().
Ultimately, you are changing the DOM on the fly and this will impact ARIA as screenreaders will not follow the links readily. You have no ready means of adding Alt text.
Acorn
Bookmarks