javaScript and CSS responsive Photo / image viewer window and gallery.
Demo website or CodePen (Full page),
Photo PopUp 1.3.1 | PhotoSwipe 4.1.1 | FancyBox 1.3.4 | Yoxigen 2.21 | Clearbox 3.7 | |
---|---|---|---|---|---|
JavaScript size | 12.6 KB | 25 KB (only core.js) | 27.9 KB | 39.6 KB | 16.1 KB (only cb_core.js) |
Using jQuery | No | No | Yes | Yes | Yes |
Responsive (resized window) | Yes | Yes | No | Yes | No |
Mobile view | Good | Good | Good | Good | Good |
Keyboard control | Yes | Yes | Yes | Yes | No |
Touch gesture control | Yes | Yes | No | No | No |
Easy basic configuration | Yes | Yes | Yes | Yes | Yes |
Custom events | Yes | Yes | Yes | No | No |
Custom buttons, functions | Yes | No | No | No | No |
HTML5 fullscreen | Yes, with addon | Yes | No | No | No |
Image zoom | Not yet | Yes | No | No | No |
Image preload in gallery | Yes | Yes | No | No | No |
Fade animation | Yes | No | Yes | Yes | Yes |
Text window | Yes | No | Yes | Yes | Yes |
summary | 13/14 | 10/14 | 6/14 | 6/14 | 4/14 |
- Load script.js and style.css or script_min.js and style_min.css
- Add website the contents of the photopopop.html file
- Use the newgallery function, with this parameter:
- HTML image tags className
imagepopup.newGallery('imagagesClassName');
- Use the showimage function, with this parameter:
- First parameter: Image URL
- Second parameter: Image title
- third parameter: Gallery class name (see more: using_test.html and using_test.js)
imagepopup.showImage('http://test.hu/image.jpg');
imagepopup.showImage('http://test.hu/image.jpg','This is an image.');
- Use the showtext function, with this parameter:
- First parameter: Title
- Second parameter: Full text
imagepopup.showText('Header','Text');
imagepopup.showText('Header',document.getElementById('szovpop').innerHTML);
- Use the hideimage function
imagepopup.hideImage();
- Use the addbutton function, with this parameter:
- First parameter: Title, button text
- Second parameter: function, that runs when clicked on the button
imagepopup.addbutton('alert button',function(){alert('alert');});
- Use the addevent function, with this parameter:
- First parameter: onopen / onclose / onbuttonclick
- Second parameter: function
- a onopen return url and title, onclose return 'prev' or 'next'
imagepopup.addevent('onopen',function(url,title){alert('Open image ('+url+')');});
- Edit option object in script
- CSS3 + Javascript beúszó ablak
- PhotoSwipe (implementation ideas)
- And custom scripts combination