BOAT, Indian ink & acrylic marker on paper, 1m50 x 2m22, 2011
http://www.devierdewand.blogspot.com/
// script.js
document.addEventListener("DOMContentLoaded", function() {
// Check if the body has the specific page class
if (document.body.classList.contains('page-id-400605')) {
const container = document.getElementById("container");
// Function to create and position images
function createImage(src) {
const img = document.createElement("img");
img.src = src;
img.classList.add("image");
// Set random width and rotation
const randomWidth = Math.random() * (150 - 50) + 50; // Random width between 50px and 150px
const randomRotation = Math.random() * 30 - 15; // Random rotation between -15deg and 15deg
img.style.width = `${randomWidth}px`;
img.style.transform = `rotate(${randomRotation}deg)`;
// Random position within the container
img.style.top = Math.random() * (container.clientHeight - randomWidth) + 'px';
img.style.left = Math.random() * (container.clientWidth - randomWidth) + 'px';
img.draggable = true;
// Event listeners for dragging
img.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text/plain", null); // For Firefox compatibility
img.style.transition = 'none'; // Disable transition during drag
});
img.addEventListener("dragend", function() {
img.style.transition = 'transform 0.1s'; // Re-enable transition after drag
});
img.addEventListener("drag", function(e) {
const x = e.clientX - container.getBoundingClientRect().left - randomWidth / 2; // Adjust for image width
const y = e.clientY - container.getBoundingClientRect().top - randomWidth / 2; // Adjust for image height
img.style.transform = `translate(${x}px, ${y}px) rotate(${randomRotation}deg)`; // Keep rotation
});
container.appendChild(img);
}
// Load images from a specified folder
const imageFolder = 'https://yourwebsite.com/path/to/your/images/'; // Update with your image folder path
let i = 1; // Initialize the counter
while (true) { // Infinite loop to keep trying to load images
const imageUrl = `${imageFolder}image${i}.jpg`; // Adjust this to match your image naming convention
const img = new Image();
img.src = imageUrl;
// Check if the image exists before creating it
img.onload = function() {
createImage(imageUrl);
};
img.onerror = function() {
console.log(`Image ${imageUrl} does not exist. Stopping further attempts.`);
break; // Stop loading more images if one doesn't exist
};
i++; // Increment the counter
}
}
});
