Here's a **completely different type** of popup iframe implementation with a **slide-in panel** design that appears from the side of the screen, with **thumbnail navigation** and **auto-rotation** features:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-In Iframe Panel</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
overflow-x: hidden;
}
/* Slide-in panel */
.slide-panel {
position: fixed;
top: 0;
right: -400px; /* Start hidden off-screen */
width: 400px;
height: 100vh;
background: white;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
transition: right 0.5s ease;
z-index: 1000;
display: flex;
flex-direction: column;
}
.slide-panel.active {
right: 0; /* Slide in */
}
/* Panel header */
.panel-header {
padding: 15px;
background: #2c3e50;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-title {
font-weight: bold;
font-size: 18px;
}
.panel-controls button {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
/* Main iframe container */
.iframe-container {
flex: 1;
position: relative;
overflow: hidden;
}
.panel-iframe {
width: 100%;
height: 100%;
border: none;
}
/* Thumbnail navigation */
.thumbnail-nav {
height: 80px;
background: #f5f5f5;
display: flex;
overflow-x: auto;
padding: 10px;
gap: 8px;
}
.thumbnail {
min-width: 100px;
height: 60px;
background: #ddd;
cursor: pointer;
position: relative;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.2s;
}
.thumbnail.active {
border-color: #3498db;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
color: white;
font-size: 10px;
padding: 2px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Toggle button */
.panel-toggle {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #2c3e50;
color: white;
border: none;
border-radius: 5px 0 0 5px;
padding: 10px;
cursor: pointer;
z-index: 999;
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
}
/* Responsive adjustments */
@media (max-width: 500px) {
.slide-panel {
width: 100%;
right: -100%;
}
.thumbnail {
min-width: 80px;
height: 50px;
}
}
</style>
</head>
<body>
<!-- Slide-in panel -->
<div class="slide-panel" id="slidePanel">
<div class="panel-header">
<div class="panel-title">Website Viewer</div>
<div class="panel-controls">
<button id="prevBtn">◄</button>
<button id="playPauseBtn">❚❚</button>
<button id="nextBtn">►</button>
<button id="closeBtn">×</button>
</div>
</div>
<div class="iframe-container">
<iframe class="panel-iframe" id="panelIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="thumbnail-nav" id="thumbnailNav">
<!-- Thumbnails will be generated by JavaScript -->
</div>
</div>
<!-- Toggle button -->
<button class="panel-toggle" id="panelToggle">◄</button>
<script>
// Enhanced URL list with thumbnails and titles
const sites = [
{
url: 'https://advertica13.blogspot.com/',
thumbnail: 'https://via.placeholder.com/100x60/3498db/ffffff?text=Advertica13',
title: 'Advertica 13'
},
{
url: 'https://advertica12.blogspot.com/',
thumbnail: 'https://via.placeholder.com/100x60/e74c3c/ffffff?text=Advertica12',
title: 'Advertica 12'
},
{
url: 'https://advertica08.blogspot.com/',
thumbnail: 'https://via.placeholder.com/100x60/2ecc71/ffffff?text=Advertica08',
title: 'Advertica 08'
},
// Add all other URLs with their thumbnails and titles
// ...
{
url: 'https://www.softmod.shop/',
thumbnail: 'https://via.placeholder.com/100x60/9b59b6/ffffff?text=Softmod',
title: 'Softmod Shop'
}
];
// DOM elements
const slidePanel = document.getElementById('slidePanel');
const panelIframe = document.getElementById('panelIframe');
const panelToggle = document.getElementById('panelToggle');
const closeBtn = document.getElementById('closeBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const playPauseBtn = document.getElementById('playPauseBtn');
const thumbnailNav = document.getElementById('thumbnailNav');
// State variables
let currentIndex = 0;
let rotationInterval;
let isPlaying = true;
const rotationSpeed = 15000; // 15 seconds
// Initialize the panel
function initPanel() {
createThumbnails();
loadCurrentSite();
startRotation();
updateActiveThumbnail();
}
// Create thumbnail navigation
function createThumbnails() {
thumbnailNav.innerHTML = '';
sites.forEach((site, index) => {
const thumb = document.createElement('div');
thumb.className = 'thumbnail';
thumb.innerHTML = `
<img src="${site.thumbnail}" alt="${site.title}">
<span class="thumbnail-label">${site.title}</span>
`;
thumb.addEventListener('click', () => {
currentIndex = index;
loadCurrentSite();
updateActiveThumbnail();
});
thumbnailNav.appendChild(thumb);
});
}
// Load current site
function loadCurrentSite() {
if (currentIndex >= 0 && currentIndex < sites.length) {
panelIframe.src = sites[currentIndex].url;
}
}
// Update active thumbnail
function updateActiveThumbnail() {
document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
thumb.classList.toggle('active', index === currentIndex);
});
}
// Start rotation
function startRotation() {
if (rotationInterval) clearInterval(rotationInterval);
rotationInterval = setInterval(() => {
if (isPlaying) {
nextSite();
}
}, rotationSpeed);
}
// Next site
function nextSite() {
currentIndex = (currentIndex + 1) % sites.length;
loadCurrentSite();
updateActiveThumbnail();
}
// Previous site
function prevSite() {
currentIndex = (currentIndex - 1 + sites.length) % sites.length;
loadCurrentSite();
updateActiveThumbnail();
}
// Toggle play/pause
function togglePlayPause() {
isPlaying = !isPlaying;
playPauseBtn.textContent = isPlaying ? '❚❚' : '►';
if (isPlaying) {
startRotation();
}
}
// Toggle panel visibility
function togglePanel() {
slidePanel.classList.toggle('active');
panelToggle.textContent = slidePanel.classList.contains('active') ? '►' : '◄';
}
// Event listeners
panelToggle.addEventListener('click', togglePanel);
closeBtn.addEventListener('click', togglePanel);
prevBtn.addEventListener('click', () => {
prevSite();
if (!isPlaying) startRotation();
});
nextBtn.addEventListener('click', () => {
nextSite();
if (!isPlaying) startRotation();
});
playPauseBtn.addEventListener('click', togglePlayPause);
// Initialize
initPanel();
// Close panel when clicking outside (optional)
document.addEventListener('click', (e) => {
if (!slidePanel.contains(e.target) && e.target !== panelToggle) {
slidePanel.classList.remove('active');
panelToggle.textContent = '◄';
}
});
</script>
</body>
</html>
```
### Key Features of This Design:
1. **Slide-In Panel**:
- Appears from the side of the screen (right side by default)
- Can be toggled with a persistent button
- Smooth sliding animation
2. **Thumbnail Navigation**:
- Visual preview of all sites
- Clickable thumbnails for direct navigation
- Active site highlighted
- Horizontal scrolling for many thumbnails
3. **Enhanced Controls**:
- Play/pause auto-rotation
- Previous/next navigation
- Close button
4. **Responsive Design**:
- Full-width on mobile devices
- Adjusts thumbnail sizes for smaller screens
5. **Visual Improvements**:
- Clean modern interface
- Custom thumbnails with titles
- Color-coded differentiation between sites
6. **User Experience**:
- Persistent toggle button always available
- Visual feedback for active site
- Option to pause auto-rotation
To implement this, you would need to:
1. Add proper thumbnail images for each site (I used placeholders)
2. Complete the sites array with all your URLs
3. Customize colors and styling to match your brand
This design is particularly useful when you want to provide continuous access to multiple sites without interrupting the main page content.
