Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<body style="background:#0f0; margin:0; padding:0">
<style>
#mygallery {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); display:none; position:relative; position:absolute}
#myimages {margin: 0px auto;width:1050px;background:#fff}
#mygalimg {margin: 0px auto;max-width:1020px; max-height:768px;border:2px #000 solid; margin-top: 20px;margin-bottom: 20px;}
 
#wid{position:absolute; left:30%; top: 100px;}
​
#nextimg {font-size:70px;position:absolute; left:50%; top: 250px; margin-left:525px;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 0px 20px 20px 0px;cursor:pointer}
#preimg {font-size:70px;position:absolute; left:50%; top: 250px;margin-left:-564;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 20px 0px 0px 20px;cursor:pointer}
</style>
<div id="mygallery">
<div id="myimages">
<input id="new">
<div style="z-index:999; cursor:pointer" align="right" onclick="document.getElementById('mygallery').style.display = 'none'">Закрыть</div>
<center><img id="mygalimg"></center>
<hr>
<p id="myimgname"></p>
<hr>
</div>
<div id="nextimg" onclick="next()"><b>></b></div>
<div id="preimg" onclick="prev()"><b><</b></div>
</div>
 
<a class="mygallery" title="image 1" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_9.gif">image 1</a>
<a class="mygallery" title="image 2" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_8.gif">image 2</a>
<a class="mygallery" title="image 3" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_7.gif">image 3</a>
<script>
for(var i = 0; i < document.getElementsByClassName("mygallery").length; i++){document.getElementsByClassName("mygallery")[i].id=i+"mygalimg"}
  function myimg(myimage) {
info = myimage.title;
imgsrc = myimage.href;
imgid = parseInt(myimage.id);
 
img = new Image();
img.src = imgsrc;
img.onload = function () {
 
document.getElementById("mygallery").style.display = "block";
document.getElementById("mygalimg").src = imgsrc;
document.getElementById("myimgname").innerHTML = info;
}
}
 
function next() {
imgid = imgid+1
if(imgid < document.getElementsByClassName("mygallery").length){imgid = imgid}else{imgid = 0}
myimg(document.getElementById(imgid+"mygalimg"))
}
function prev() {
imgid = imgid-1;
if(imgid >= 0){imgid = imgid}else{imgid = document.getElementsByClassName("mygallery").length}
myimg(document.getElementById(imgid+"mygalimg"));
}
</script>
 
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Tasmanpro
0viewers