Я хочу сделать просмотрщик изображений (для моего сайта), как тот, что в Facebook (старый).Когда пользователь щелкает стрелку «Далее» или «Назад», он изменит изображение и URL страницы.
Это пример того, что я хочу (http://www.facebook.com/pages/Forest-Ville/307556775942281)
Самое главное, я хочустраница для перезагрузки при каждом клике с новым (URL, поле для комментариев, реклама и т. д.) Я не хочу использовать какие-либо файлы cookie. Сейчас я использую это, но оно полностью отличается от того, что я хочу.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="JavaScript"> var NumberOfImages = 10 var img = new Array(NumberOfImages) img[0] = "http://damnthisfunny.site40.net/1.jpg" img[1] = "http://damnthisfunny.site40.net/2.jpg" img[2] = "http://damnthisfunny.site40.net/3.jpg" img[3] = "http://damnthisfunny.site40.net/4.jpg" img[4] = "http://damnthisfunny.site40.net/5.jpg" img[5] = "http://damnthisfunny.site40.net/6.jpg" img[6] = "http://damnthisfunny.site40.net/7.jpg" img[7] = "http://damnthisfunny.site40.net/8.jpg" img[8] = "http://damnthisfunny.site40.net/9.jpg" img[9] = "http://damnthisfunny.site40.net/10.jpg" var imgNumber = 0 function NextImage() { imgNumber++ if (imgNumber == NumberOfImages) imgNumber = 0 document.images["VCRImage"].src = img[imgNumber] } function PreviousImage() { imgNumber-- if (imgNumber < 0) imgNumber = NumberOfImages - 1 document.images["VCRImage"].src = img[imgNumber] } </script> <body> <center> <img name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr> <br /> <a href="javascript:PreviousImage()"> <img border="0" src="left1.jpg" /></a> <a href="javascript:NextImage()"> <img border="0" src="right1.jpg" /></a> </center> </body> </html>
Есть идеи?
Если вы хотите каждый раз перезагружать страницу, вы можете просто обновить location.href и добавить к ней хэш-значение, обозначающее изображение, которое вы хотите загрузить:
location.href
<img id="theImg" name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr> <a href="javascript:PreviousImage()"> <img border="0" src="left1.jpg" /></a> <a href="javascript:NextImage()"> <img border="0" src="right1.jpg" /></a> <script type="text/javascript"> var NumberOfImages = 10 var img = new Array(NumberOfImages); img[0] = "http://damnthisfunny.site40.net/1.jpg"; img[1] = "http://damnthisfunny.site40.net/2.jpg"; img[2] = "http://damnthisfunny.site40.net/3.jpg"; img[3] = "http://damnthisfunny.site40.net/4.jpg"; img[4] = "http://damnthisfunny.site40.net/5.jpg"; img[5] = "http://damnthisfunny.site40.net/6.jpg"; img[6] = "http://damnthisfunny.site40.net/7.jpg"; img[7] = "http://damnthisfunny.site40.net/8.jpg"; img[8] = "http://damnthisfunny.site40.net/9.jpg"; img[9] = "http://damnthisfunny.site40.net/10.jpg"; var imgNum = parseInt(location.hash.substring(location.hash.indexOf('img=')+4)); if (isNaN(imgNum) || imgNum < 1 || imgNum > NumberOfImages) imgNum = 1; document.getElementById('theImg').src = img[imgNum]; function NextImage() { location.href = 'this.html#img='+(imgNum+1); } function PreviousImage() { location.href = 'this.html#img='+(imgNum-1); } </script>
Я бы рекомендовал использовать плагин jQuery для такого проекта, а затем настроить его под свои нужды.
Вот ссылка для просмотра: http://www.designsmag.com/2011/06/50-jquery-image-gallery-tutorials-and-plugins/