Разворачивающаяся карусель картинок

Первое сообщение в теме :

Домовой, я попытался объединить два скрипта в один. Ваш «Очередной слайдер-карусель картинок», и другой взят с этого сайта: Ссылка

По моему не плохо получается, но не могу закончить. Вообщем вот посмотрите: ДЕМО теперь все картинки из вашей слайдер-карусели можно открыть в большом размере. Но при этом ряд картинок у меня растянулся вместе с форумом, хотелось бы чтобы было четыре-пять картинки, а дальше стрелочка с прокруткой...

Возьметесь помочь довести скрипт до ума? У меня дальше самому не получается. При желании могу дать пароль от своего "форума-пробника" воротите там что угодно.

Вообщем я использовал вот такой скрипт, вставив его в index_body сверху:

Код:

<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>

<br/><br/><div class="jMyCarousel">
    <ul>
 Очередной слайдер-карусель картинок
</li>
<<li><img src=="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" rel="iLoad|Ретро" title="Памятник Н. А. Вилкову"> <img
src="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" height="120" width="160" title="Ретро"></a>

</li>
<a href="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" rel="iLoad|Ретро" title="Баня"> <img
src="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" height="120" width="160" title="Ретро"></a>

</li>
<a href=http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg rel="iLoad|Ретро"  title="Вход в Комсомольский парк"> <img
src="http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg" height="120" width="160" title="Ретро"></a>

</li>
<a href="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" rel="iLoad|Ретро"  title="Клуб заветы Ильича"> <img
src="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" height="120" width="160" title="Ретро"></a>

</li>
<a href=http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg rel="iLoad|Ретро"  title="Старый парк"> <img
src="http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg" height="120" width="160" title="Ретро"></a>

</li>
<a href=http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg rel="iLoad|Ретро"  title="Теремок в старом парке"> <img
src="http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg" height="120" width="160" title="Ретро"></a>

</li><li><img src=="http://s07.radikal.ru/i180/1206/9b/ecb4ca64fcfb.jpg" rel="iLoad|Ретро"  title="Улица Промышленная"> <img
src="http://s07.radikal.ru/i180/1206/9b/ecb4ca64fcfb.jpg" height="120" width="160" title="Ретро"></a> </li> </ul>
</div>

Офигеть блин... Чего ж у меня то за ни хочу... Ушел пробовать по-новой

Вообще безрезультатно. Думал может с другими кодами конфликты, очистил весь CSS поставил один этот код и ничего...

Скрипт стоит в index_body сверху:

Код:

<script type='text/javascript' src='http://studioad.ru/iload/iLoad.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>

<div class="jMyCarousel">
<ul>
<li>
<a href="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" rel="iLoad|Ретро" title="Памятник Н. А. Вилкову"> <img
src="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" rel="iLoad|Ретро" title="Баня"> <img
src="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg rel="iLoad|Ретро"  title="Вход в Комсомольский парк"> <img
src="http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" rel="iLoad|Ретро"  title="Клуб заветы Ильича"> <img
src="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg rel="iLoad|Ретро"  title="Старый парк"> <img
src="http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg rel="iLoad|Ретро"  title="Теремок в старом парке"> <img
src="http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg" height="120" width="160" title="Ретро"/></a>
</li>
</ul>
</div>

В СSS стоит:

Код:

#pun-announcement {
padding:1px;
border:double 3px #120A8F;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

Чего у меня не так?..

А разве скрипт в приветствии стоит?
Он же вроде в объяве у вас
Если в объяве то надо делать вмешательство в шаблон overall_header

Так попробуйте его завернуть в див контейнер

Короче в CSS ставьте

Код:

.carousel{
padding:1px;
border: double 3px #120A8F;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
}

а скрипт заверните в див
Вот так сделайте скрипт

Код:

<div class="carousel">
<script type='text/javascript' src='http://studioad.ru/iload/iLoad.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>
<div class="jMyCarousel">
<ul>
<li>
<a href="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" rel="iLoad|Ретро" title="Памятник Н. А. Вилкову"> <img
src="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" rel="iLoad|Ретро" title="Баня"> <img
src="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg rel="iLoad|Ретро"  title="Вход в Комсомольский парк"> <img
src="http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" rel="iLoad|Ретро"  title="Клуб заветы Ильича"> <img
src="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg rel="iLoad|Ретро"  title="Старый парк"> <img
src="http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg rel="iLoad|Ретро"  title="Теремок в старом парке"> <img
src="http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg" height="120" width="160" title="Ретро"/></a>
</li>
</ul>
</div>
  </div>

Спасибо огромное!!! Все отлично, прям как хотел)))

ну слава богу))))
я просто подумал что в приветствии стоит.

Спасибо!)) Домовой, давайте уже добъем эту тему))) Достал наверно уже. Ну может не только для себя прошу. Здорово же по-моему получилось! Здесь не у кого подобного просмотра фотографий не встречал.

Вообщем надеюсь последний вопрос, просьба. Ваш же, если ничего не путаю, код в виджете стоит "Стрелочки для навигации по форуму" Вот именно эти стрелочки у меня заползают под карусель, когда страницу покрутить вверх. Можно исправить?..

Код в виджете:

Код:

<!--Кнопки в верх в низ--><div style="position:fixed; right:0.5%; bottom:45%;">
<a href=#top onClick="scrollTo(0,0); return false;" title="На верх страницы"><img src="http://s019.radikal.ru/i621/1205/79/bef63fd18045.png" alt="На верх страницы" border="0"></a>
<br/><br/>
<a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы"><img src="http://s019.radikal.ru/i602/1205/a4/2eb1857ee75a.png" alt="Вниз страницы" border="0"></a>
</div>

Форум все тот же: http://probnichec.forum2x2.ru/

Ну можно изменить ширину форума, сделать 90%.
Можно заменить код кнопок на этот

Код:

<!--Кнопки в верх в низ-->
<div style="position:fixed; right:0.2%; bottom:45%;z-index: 999;">
<a href=#top onClick="scrollTo(0,0); return false;" title="На верх страницы"><img src="http://s019.radikal.ru/i621/1205/79/bef63fd18045.png" alt="На верх страницы" border="0"></a>
<br/><br/>
<a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы"><img src="http://s019.radikal.ru/i602/1205/a4/2eb1857ee75a.png" alt="Вниз страницы" border="0"></a>
</div>

Спасибо все отлично! Ставлю "Решено" в теме))) Думаю выжали все что только было возможно. Еще раз огромная вам благодарность за помощь!

не за что))

По ходу не все еще)))

Домовой, все перепроверил наконец понял, что именно из-за этого скрипта:

Код:

<div class="carousel">
<script type='text/javascript' src='http://studioad.ru/iload/iLoad.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>
<div class="jMyCarousel">
<ul>
<li>
<a href="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" rel="iLoad|Ретро" title="Памятник Н. А. Вилкову"> <img
src="http://s019.radikal.ru/i630/1206/cb/b84f1e2c3236.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" rel="iLoad|Ретро" title="Баня"> <img
src="http://s018.radikal.ru/i514/1206/29/cded3eaf84f4.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg rel="iLoad|Ретро"  title="Вход в Комсомольский парк"> <img
src="http://s019.radikal.ru/i613/1206/55/1d76c5c51b7f.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" rel="iLoad|Ретро"  title="Клуб заветы Ильича"> <img
src="http://s53.radikal.ru/i141/1206/b6/ffb108215ade.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg rel="iLoad|Ретро"  title="Старый парк"> <img
src="http://s019.radikal.ru/i603/1206/b4/22099d57ce91.jpg" height="120" width="160" title="Ретро"/></a>
</li>
<li>
<a href=http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg rel="iLoad|Ретро"  title="Теремок в старом парке"> <img
src="http://s019.radikal.ru/i601/1206/8c/7a0ad04ed55c.jpg" height="120" width="160" title="Ретро"/></a>
</li>
</ul>
</div>
  </div>

Стал глючить скрипт "Оформление блока статистики с помощью вкладок" от Даны (Посмотрите здесь: http://probnichec.forum2x2.ru/) Как сделать чтобы они не конфликтовали и каждый работал так как положено?..

Скрипт Даны, стоит как и ваш в index_body вот этот: https://help.forum2x2.ru/t26528-topic

Здесь я не помощник.

А если в приветствие скрипт "карусели" переставить, это решит проблему? Если да, опишите мне как это сделать, пожалуйста, а то я не очень понимаю как это поставить скрипт в приветствие...

... И Дана, если читаете, может вы понимаете почему два скрипта так не уживаются друг с другом?.. Мне и тот и другой нужен!

Y.nby пишет:А если в приветствие скрипт "карусели" переставить, это решит проблему? Если да, опишите мне как это сделать, пожалуйста, а то я не очень понимаю как это поставить скрипт в приветствие...

Ну попробуйте.
ПА - Оформление - Главная - Общая информация - Приветствие на главной странице
Заголовок приветствия : ничего не пишите
Текст приветствия : вставьте туда скрипт.

Спасибо. К сожалению, все также. По одному скрипты работают, а вместе никак не уживаются...

Может Дана чего посоветует...

Дана,у меня стоит в JS, код что написан в вашем туториале:

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
        });
 $("#pw1-button").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                    opacity: 1, backgroundPosition: '0 -30px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
              }, 60 );
            });
      });

Или вы что-то другое имеете ввиду?

Я цитировала Вашу фразу

Скрипт Даны, стоит как и ваш в index_body вот этот: https://help.forum2x2.ru/t26528-topic

Т.е., я так поняла, что скрипт статистики у Вас установлен дважды — и в index_body, и в Управлении JS?

Как это?.. То есть, у меня в index_body:

Код:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<td class="catHead" colspan="2" height="28">
<span class="cattitle">  Статистика нашего форума</span>
</td>
<tr>

<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

<td>

    <div id="page-wrap">

          <div id="pw1-button" class="button">Кто онлайн</div>
          <div id="pw2-button" class="button">Дни Рождения</div>
          <div id="pw3-button" class="button">Статистика</div>
          <div id="pw4-button" class="button">Чат</div>
          <div class="clear"></div>

          <div id="nwcontent">

              <div id="pw1" class="list">
                    <b>Сколько юзеров на форуме?</b>
                    <hr />
                    <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                    <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p><table>{L_CONNECTED_MEMBERS}</table>
              </div>

              <div id="pw2" class="list">
                  <b>Поздравляем с ДР!</b>
                  <hr />
                  <table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table>
              </div>

              <div id="pw3" class="list">
                    <b>Статистика</b>
                    <hr />
                    <p>{TOTAL_POSTS}</p>
                    <p>{TOTAL_USERS}</p>
                    <p>{NEWEST_USER}</p>
                    <p>{LEGEND} : {GROUP_LEGEND}</p>
              </div>

              <div id="pw4" class="list">
                    <b>Общение онлайн</b>
                    <hr />
              {CHATBOX_BOTTOM}
              <p>[ <a href="/chatbox/index.forum?" target="_blank">Открыть чат на отдельной странице</a> ]</p>
              <p>Если кнопка "Войти в ЧАТ" не видна, авторизируйтесь на форуме ;) </p>
      </div>

          </div>
</div>
        </td>
      </tr>
  </table>

В Управлении JS:

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
        });
 $("#pw1-button").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                    opacity: 1, backgroundPosition: '0 -30px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
              }, 60 );
            });
      });

И в CSS:

Код:

#page-wrap td.row1 {
background-color: transparent;
padding: 0;
margin: 0;
}

.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #F5F6FF;
border: 1px solid #C6EAF7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 0 3px 3px;
padding: 5px;
}

/* первый активный блок */
#pw1 {
display: block;
}

/* все скрытые блоки после первого */
#pw2, #pw3, #pw4 {
display: none;
}

/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4 {
padding: 3px;
text-align: left;
font-size: 10px;
}

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover {
text-decoration: none !important;
}

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
display: block;
width: 150px;
height: 30px;
margin: 2px 2px 0 0;
text-align: center;
line-height: 30px;
background: transparent url("http://i038.radikal.ru/1207/8e/35f52655a27b.png") center

top no-repeat;
color: #fff;
text-shadow: 1px 1px #688E23;
font-size: 13px;
font-weight: bolder;
}

/* первая активная кнопка */
#pw1-button {
background: transparent url("http://i038.radikal.ru/1207/8e/35f52655a27b.png") center

-40px no-repeat;
margin-left: 15px;
}

Дана, давайте пароль от админки в личку скину, так вам проще будет посмотреть

Нет-нет, раз Вы уверены, что скрипт не дублируется — тогда не в этом проблема.

Да я уже не в чем не уверен... Я просто хочу чтобы эти два скрипта уживались вместе, (Скрипт "Карусели" от Домового и ваш "Статистика") а они работают только по отдельности...

Почему так?..

З.Ы: При всем этом не движется полоска "Объявления" тоже, начинает работать как только убираю скрипт "карусели"

http://probnichec.forum2x2.ru/

Домовой, вы мне уже помогли, со своими стрелками "Навигации", когда те прятались под "Карусель картинок", теперь такая же проблема со стрелкой "Сворачивание виджетов" от Luz, туториал: https://help.forum2x2.ru/t12885-topic

Можете исправить, чтобы она была поверх "Карусели"?

В виджетах стоит вначале:

Код:

<div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://illiweb.com/fa/optimisation_fdf/common/arrow_ltr.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>

И в конце:

Код:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

Подскажите, пожалуйста.

Попробуйте добавить в код кнопки

Код:

z-index: 999;

К вашему же, я так понял, коду в CSS я так сделал:

Код:

.carousel{
z-index: 999 
padding:1px;
border: double 3px #ff7518;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
}

Не работает. По-прежнему под "карусель" залезает...

Домовой, спасибо большое! Все работает, дошло до меня что в виджет надо к коду моей кнопки добавить))

Код:

<div id="forum-widget" style="height: 13px; z-index: 999; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://s019.radikal.ru/i605/1207/f9/421d64de2691.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>