javaScript and CSS responsive Photo / image viewer window and gallery.

Demo website or CodePen (Full page),

While theme (version 1.1)

1. Load script.js and style.css or script_min.js and style_min.css
2. Add website the contents of the photopopop.html file

• Use the newgallery function, with this parameter:
  • HTML image tags className

imagepopup.newGallery('imagagesClassName');

More about Gallery

• 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();

See this example

• 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');});

See this example

• 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