• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: dotbot  
Сообщество uCoz » Архивариус » Корзина » Скрипт между </figcaption></figcaption> (Как вставить скрипт между </figcaption></figcaption>)
Скрипт между </figcaption></figcaption>
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 1 | 12:22:27
Приветствую форумчане. Как вставить скрипт между figcaption не подскажите.

К примеру. Изображение переворачивается и на задней стороне банер.

Вот код:

Код<ul class="demo-3">
<li>
<figure>
<img src="Ссылка на картинку" alt=""/>
<figcaption>
<h2>Заголовок</h2>
<p>КАК ВСТАВИТЬ СЮДА СКРИПТ</p>
</figcaption>
</figure>
</li>
</ul>
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 2 | 12:28:49
Vivaci, и снова я вас не совсем понял что вы пытаетесь сделать. <P>Сюда скрипты никто не ставит, сюда ставят текст</P>.
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 3 | 12:34:52
Вот ссылка на страницу: http://rubarub.ru/blog....-25-59#

Там 2-я картинка, при наведении курсора разворачивается и написано "Если не видно картинку, увеличить и т.д.", ниже этого текста нужно вставить ротатор банеров.

Как в этот код вставить ротатор банеров на обратной стороне картинки?

Вот сам код:


Код
<ul class="demo-3">
                  <li>
                      <figure>
                          <img src="Ссылка на картинку" alt=""/>
                          <figcaption>
                    <h2>Заголовок</h2>
                    <p>Описание</p>
                          </figcaption>
                      </figure>
                  </li>
</ul>
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 4 | 12:40:38
<ul class="demo-3">
<li>
<figure>
<img src="Ссылка на картинку" alt=""/>
Сюда код баннера попробуйте
<figcaption>
<h2>Заголовок</h2>
<p>Описание</p>
</figcaption>
</figure>
</li>
</ul>
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 5 | 12:42:46
Так она на фронтальную сторону крепится
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 6 | 12:44:44
Покажите весь скрипт, так прощу будет.
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 7 | 13:41:55
Вот CSS


Код
.demo-3 {
                  position:relative;
                  width:70%;
                  
                  overflow:hidden;
                  float:center;
                  margin-right:20px
}
.demo-3 figure {
                  margin:0;
                  padding:0;
                  position:relative;
                  cursor:pointer;
                  margin-left:0px
}
.demo-3 figure img {
                  display:block;
                  position:relative;
                  z-index:10;
                  margin:-15px 0
}
.demo-3 figure figcaption {
                  display:block;
                  position:absolute;
                  z-index:5;
                  -webkit-box-sizing:border-box;
                  -moz-box-sizing:border-box;
                  box-sizing:border-box
}
.demo-3 figure h2 {
                  font-family:'Lato';
                  color:#fff;
                  font-size:20px;
                  text-align:center
}
.demo-3 figure p {
                  display:block;
                  font-family:'Lato';
                  font-size:12px;
                  line-height:18px;
                  margin:0;
                  color:#fff;
                  text-align:center
}
.demo-3 figure figcaption {
                  top:0;
                  left:0;
                  width:100%;
                  height:100%;
                  padding:29px 44px;
                  background-color:rgba(26,76,110,0.5);
                  text-align:center;
                  backface-visibility:hidden;
                  -webkit-transform:rotateY(-180deg);
                  -moz-transform:rotateY(-180deg);
                  transform:rotateY(-180deg);
                  -webkit-transition:all .5s;
                  -moz-transition:all .5s;
                  transition:all .5s
}
.demo-3 figure img {
                  backface-visibility:hidden;
                  -webkit-transition:all .5s;
                  -moz-transition:all .5s;
                  transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
                  -webkit-transform:rotateY(180deg);
                  -moz-transform:rotateY(180deg);
                  transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
                  -webkit-transform:rotateY(0);
                  -moz-transform:rotateY(0);
                  transform:rotateY(0)
}


А вот установленный код на странице


Код
<ul class="demo-3">
                  <li>
                      <figure>
                          <a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><img src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/> </a>
                          <figcaption>
                    <h2><a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg">Невидно картинку?<br> Нажми<br><br>УВЕЛИЧИТЬ<img class="top" src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/></a></h2>
                    <p></p>
                          </figcaption>
                      </figure>
                  </li>
</ul>

Добавлено (27 Фев 2016, 13:41:55)
---------------------------------------------
Вот таким образом получилось разместить на тыловой стороне так, что заместо банера появилась его тень, но ссылка работает, только нет картинки, одна тень.

Код<ul class="demo-3">
<li>
<figure>
<a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><img src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/> </a>
<figcaption>
<h2><p><a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><span style="color:#D3D3D3;"><span style="font-size:18px;"><strong>Невидно картинку?<br />
Нажмите</strong></span></span><br />
<br />
<span style="color:#FFFFFF;"><span style="font-size:24px;"><strong>УВЕЛИЧИТЬ</strong></span></span></a></p>
</h2>
<p></p>
<figcaption><figure> СКРИПТ РОТАТОРА БАНЕРОВ <figure> <figcaption>
</figcaption>
</figure>
</li>
</ul>

Вот скрин

SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 8 | 13:52:00
Извиняюсь за долгий ответ, нет тормозит. А где сам код баннера?

.demo-3 { position:relative;
width:70%;

overflow:hidden;
float:center;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:0px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:center
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:center
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:visible;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}

hidden - это элемент будет невидимым, а visible будет отображать элемент как выдимый.
Сообщение отредактировал SkyFfs - Суббота, 27 Фев 2016, 13:53:56
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 9 | 14:03:09
Он сюда почему то так вставляется

<script type="text/javascript" src="http://rubarub.ru/rtr/2"></script>

А выглядит так

Добавлено (27 Фев 2016, 13:54:16)
---------------------------------------------
О, а в сообщении по другому вставляется. Отправил нормально стало

Добавлено (27 Фев 2016, 13:59:29)
---------------------------------------------
Все равно невидно банер

Добавлено (27 Фев 2016, 14:03:09)
---------------------------------------------
Вот на этом сайте может подглядеть? САЙТ

SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 10 | 14:31:23
Сейчас гляну.

Добавлено (27 Фев 2016, 14:31:23)
---------------------------------------------
Попробуйте так

<ul class="demo-3">
<li>
<figure>
<a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><img src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/> </a>
<figcaption>
<h2><p><a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><span style="color:#D3D3D3;"><span style="font-size:18px;"><strong>Невидно картинку?<br />
Нажмите</strong></span></span><br />
<br />

<span style="color:#FFFFFF;"><span style="font-size:24px;"><strong>УВЕЛИЧИТЬ</strong></span></span></a></p>
</h2>
<p></p>
<figcaption><figure> <script type="text/javascript" src="http://rubarub.ru/rtr/2"></script></figure> </figcaption>
</figcaption>
</figure>
</li>
</ul>

Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 11 | 14:35:17
Неа. Просто поверх текста затемненная оболочка становится.
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 12 | 15:00:27
У меня эта вся ваша конструкция и вовсе не работает как надо, тот сайт, что вы мне показали, там совсем другой скрипт стоит. попробуйте поищите в интернете другой.
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 13 | 15:13:19
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 14 | 15:25:58
Vivaci, вы мне скинули ссылку вашего блога, что я должен там найти?
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 15 | 15:54:23
Это была ссылка на страницу с картинкой переворота. Нашел вроде другие эффекты, сейчас попробую установить.
Сообщество uCoz » Архивариус » Корзина » Скрипт между </figcaption></figcaption> (Как вставить скрипт между </figcaption></figcaption>)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: