Форум

nozoral · #1 (**permalink**) 19.09.2013, 10:24

Всем привет. Очень хочу в своем блоге на тумблере замутить такую же штуку, чтобы в одной картинке было несколько картинок и кликая по картинке, вызывалась следующая. Вроде бы, нашел даже скрипт:

<SCRIPT language="JavaScript">
<!--
var i;
if (document.images)
{
pic1= new Image(); 
pic1.src="http://i2.cdn.turner.com/cnn/video/showbiz/2009/04/06/dcl.sbt.hammer.palin.cnn.88x49.jpg"; 

pic2= new Image(); 
pic2.src="http://i2.cdn.turner.com/cnn/video/world/2009/04/06/malveaux.michelle.obama.cnn.88x49.jpg"; 

pic3= new Image(); 
pic3.src="http://i2.cdn.turner.com/cnn/video/world/2009/04/06/moore.italy.quake.search.itn.88x49.jpg"; 
}
//-->
</SCRIPT>

<img src="http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/header/header_cnn_com_logo.gif" onclick='i=(i<4)?i:1;eval("this.src=pic"+i+".src");i++'>

Но проблема в том, что тумблер плохо относится с скриптам, которые вставлены напрямую в текстовое сообщение. хотя возможность править HTML в сообщении там есть:

Однако, у тумблера открыт основной код страницы:

Поэтому я думаю, что лучшим вариантом было бы разместить скрипт туда, а в сообщении к картинкам, которые я хочу слайдить, давать какое-то описание-ссылку на этот скрипт. Такое же реально? Или можно сделать как-то по другому?

Очень надеюсь на помощь, если что не понятно, спрашивайте.

grubbye · #2 (**permalink**) 20.09.2013, 18:23

Очень просто. Настройки → Аккаунт → Изменить способ редактирования поста: plain text/HTML
Вот пример с моего тумблера http://godnote.tumblr.com/post/59383425794.
Код выглядит вот так:

<img style="border: 5px dashed red;" src="http://naikom.ru/img/2011/folders/nm43/20.jpg" onmouseover="this.src='http://31.media.tumblr.com/b8ce9b882e90cc33ed5f8e2fe00152b3/tumblr_ms4c06VioX1r6mdwlo1_500.jpg'" 
            onmouseout="this.src='http://naikom.ru/img/2011/folders/nm43/20.jpg'"
            />

nozoral · #3 (**permalink**) 20.09.2013, 18:42

Спасибо за ответ! А как-то можно сделать, чтобы картинки менялись не при наведении мыши, а по клику по фото/определенному месту на фото?

grubbye · #4 (**permalink**) 20.09.2013, 19:23

Вариант 1:

<img src='abc.jpg' onclick='this.src="def.jpg"' />

Вариант 2:
http://godnote.tumblr.com/post/61761601864

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

   <script>
        function imgClick(evt){
            lastSelected.style.zIndex = "0";
            var imgObj = window.event ? event.srcElement : evt.target
            imgObj.style.zIndex = "1";
            lastSelected = imgObj;
        }
        window.onload = function(){
            var imgs = document.getElementsByTagName("img");
            for(var i = 0; i < imgs.length; i++){
                if(imgs[i].className.indexOf("imgs") != -1){
                    imgs[i].onclick = imgClick;
                }
            }
            window.lastSelected = imgs[0];
        }
    </script>
</head>
<body>
<img class="imgs" style="position: absolute;left: 0px;" src="http://24.media.tumblr.com/1d992ef0d0c8a10cec95571a535f4532/tumblr_msc9xy22sk1qfm87to1_500.jpg" alt="Изображение1">
<img class="imgs" style="position: absolute;left: 40px;" src="http://31.media.tumblr.com/c8f58d70f2ba8922036b38f99b34ac66/tumblr_msx8nh1tHj1saeqddo1_500.jpg" alt="Изображение2">
<img class="imgs" style="position: absolute;left: 80px;" src="http://25.media.tumblr.com/539a831fb1730c37d2c9c12178677b65/tumblr_mt9j0gZk2B1rt5ktoo1_500.jpg" alt="Изображение3">
</body>
</html>

nozoral · #5 (**permalink**) 22.09.2013, 00:29

Круто, вариант 1 больше нравится, из-за своей простоты.. а можно как-то зациклить показ? чтобы после последней картинки показывалась первая? И еще, если будет больше двух картинок, как прописать третью/четвертую картинки в этом скрипте?

Форум

Справочник

Discord чат

Курсы javascript