`; } // Initialize each iframe with its thumbnail content via srcdoc projectItems.forEach(item => { const thumb = item.getAttribute('data-thumb'); const iframe = item.querySelector('iframe'); if (iframe) { iframe.setAttribute('srcdoc', generateSrcdoc(thumb)); } }); projectItems.forEach(item => { item.addEventListener('click', function() { // If clicked item is already active, reset all to thumbnail view if (item.classList.contains('active')) { projectItems.forEach(i => { i.classList.remove('active'); const thumb = i.getAttribute('data-thumb'); const iframe = i.querySelector('iframe'); if (iframe) { iframe.setAttribute('srcdoc', generateSrcdoc(thumb)); iframe.removeAttribute('src'); iframe.setAttribute('scrolling', 'no'); } }); projectGrid.classList.remove('expanded'); } else { // Reset all items first projectItems.forEach(i => { i.classList.remove('active'); const thumb = i.getAttribute('data-thumb'); const iframe = i.querySelector('iframe'); if (iframe) { iframe.setAttribute('srcdoc', generateSrcdoc(thumb)); iframe.removeAttribute('src'); iframe.setAttribute('scrolling', 'no'); } }); // Mark clicked item as active and rearrange it item.classList.add('active'); // Prepend active item so that it shifts to the left projectGrid.prepend(item); projectGrid.classList.add('expanded'); const sample = item.getAttribute('data-iframe'); const iframe = item.querySelector('iframe'); if (iframe) { // Remove srcdoc to load the external webpage iframe.removeAttribute('srcdoc'); iframe.removeAttribute('scrolling'); iframe.setAttribute('src', sample); } } }); }); });