Слайд-шоу

JUNewsUltra — багатофункціональний модуль для відображення статей з використанням шаблонів та фільтрів.
HisShadow
Користувач
Користувач
Повідомлень: 1
З нами з: 14 березня 2013, 10:43

Слайд-шоу

Повідомлення HisShadow » 14 березня 2013, 11:19

Объясните пожалуйста как сделать вывод новостей в виде слайд-шоу (как на сайте http://city-adm.lviv.ua/ ):
[img]http://uaimage.com/t/2781896_4d602998.jpg[/img]

aleksandrkr
Користувач
Користувач
Повідомлень: 6
З нами з: 23 січня 2013, 09:26

Re: Слайд-шоу

Повідомлення aleksandrkr » 16 березня 2013, 22:12

тоже очень интересует этот вопрос.
а то получается что инструмент есть а инструкции к нему нету. :(
как с ним работать фиг его знает.
создайте хоть какой то мануал, хотя бы на примерах этого сайта http://city-adm.lviv.ua/ :)
aleksandrkr
Користувач
Користувач
Повідомлень: 6
З нами з: 23 січня 2013, 09:26

Re: Слайд-шоу

Повідомлення aleksandrkr » 17 березня 2013, 17:28

php

Код: Виділити все

defined('_JEXEC') or die('Restricted access');
?>
<div id="slidenews">

<script type="text/javascript">

function click_news(item)
{
   
    var div = document.getElementById('slidenews');
    var nod = div.GetElimentByTagName('ul');
   
   
    for(var i = 0; i < nod.lenght; i++)
    {
      var child = nod[i].childNodes;
        for(var n = 0; n < child.lenght; n++)
         if(nod[i].getAttribute('class') == 'slide-tabs')   
            child[n].setAttribute('class', 'slide-tab');
         else
            child[n].setAttribute('style', 'display: none;');
       
       if(nod[i].getAttribute('class') == 'slide-tabs')
          child[Number(item)].setAttribute('class','slide-tab current');
       else
          child[Number(item)].setAttribute('style', 'display: list-item;');
    }
   
}
</script>

<div class="slides">
<ul class="slide-tabs">
<?php
$flag = true;
foreach ($list as $key => $item)
{   
    echo('<li>');
    if($flag)
    {
      echo("<a class="slide-tab current" onclick="click_news($key)" href="#">");
      $flag = false;
    }
    else
      echo("<a class="slide-tab" onclick="click_news($key)" href="#">");
   
    echo('<span class="slide-image">');
    echo("<img width="87" height="73" alt="$item->title_alt" src="$item->imagesource">");
    echo('</span>');
    echo("<span class="slide-date">$item->date</span>");
    echo("<span class="slide-title">$item->title</span>");
    echo('</a>');
    echo('</li>');
}
?>
</ul>
</div>
   
<div class="slide">
<ul class="slide-news">
<?php
$flag = true;
foreach ($list as $item)
{
   if($flag)
   {
     echo('<li class="none" style="display: list-item;">');
     $flag = false;
   }
   else
   {
     echo('<li class="none" style="display: none;">');
   }
    echo("<img width="434" height="273" alt="$item->title_alt" src="$item->imagesource">");
    echo("<a href="$item->link">");
    echo("<span class="slide-newsinfo"><span class="slide-datecat"><span class="slide-date">$item->date</span>");
    echo("<span class="slide-cat">$item->cattitle</span></span>");
    echo("<strong>$item->introtext</strong>");
    echo('</span></a></li>');
}   
?>
</ul>
</div>

</div>
css

Код: Виділити все

#slidenews {
    background: none repeat scroll 0 0 #F5F6F8;
    border: 1px solid #EDEEF0;
    height: 292px;
    margin: 0 0 18px;
    overflow: hidden;
    position: relative;
    width: 704px;
}
#slidenews ul.slide-tabs, #slidenews ul.slide-news {
    overflow: hidden;
    position: absolute;
    top: 0;
}
#slidenews ul.slide-tabs {
    height: 273px;
    right: 0;
    top: 11px;
    width: 281px;
    z-index: 2;
}
#slidenews ul.slide-tabs li {
    display: block;
    height: 91px;
    overflow: hidden;
    position: relative;
}
#slidenews ul.slide-tabs li a.slide-tab {
    display: block;
    line-height: normal;
    padding: 4px 6px 4px 24px;
    text-decoration: none;
}
#slidenews ul.slide-tabs li a.slide-tab .slide-image {
    background: url("http://city-adm.lviv.ua/templates/lmrv3/images/b60.png") repeat scroll 0 0 transparent;
    float: left;
    margin: 0 8px 0 0;
    padding: 3px;
}
#slidenews ul.slide-tabs li a.slide-tab img {
    border: 1px solid #FFFFFF;
}
#slidenews ul.slide-tabs li .slide-date {
    display: block;
    font-weight: bold;
}
#slidenews ul.slide-tabs li .slide-title {
    -moz-hyphens: auto;
    display: inline-block;
    float: left;
    height: 65px;
    overflow: hidden;
    width: 58%;
}
#slidenews ul.slide-tabs li a.current {
    background: url("http://city-adm.lviv.ua/templates/lmrv3/images/sprt.png") no-repeat scroll right 0 transparent;
    color: #FFFFFF;
    cursor: default;
    display: block;
    height: 91px;
    overflow: hidden;
}
#slidenews ul.slide-news, #slidenews ul.slide-news li {
    height: 283px;
    position: relative;
    width: 442px;
}
#slidenews ul.slide-news li {
    height: 273px;
    left: 11px;
    position: absolute;
    top: 11px;
    width: 434px;
}
#slidenews ul.slide-news li a {
    bottom: 0;
    color: #FFFFFF;
    display: block;
    height: 273px;
    left: 0;
    position: absolute;
    text-decoration: none;
    width: 434px;
    z-index: 1;
}
#slidenews ul.slide-news .slide-newsinfo {
    background: url("http://city-adm.lviv.ua/templates/lmrv3/images/b60.png") repeat scroll 0 0 transparent;
    bottom: 12px;
    display: inline;
    left: 0;
    margin-right: 14px;
    padding: 40px 14px 12px 12px;
    position: absolute;
}
#slidenews ul.slide-news .slide-datecat {
    display: block;
    font-size: 12px;
    margin: -38px 0 0 -23px;
}
#slidenews ul.slide-news .slide-date {
    background: none repeat scroll 0 0 #276CD5;
    padding: 4px 4px 4px 11px;
}
#slidenews ul.slide-news .slide-cat {
    background: none repeat scroll 0 0 #FFD735;
    color: #D50303;
    padding: 4px 5px;
}
#slidenews ul.slide-news strong {
    display: block;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
    margin-top: 10px;
}
знатоки JS помогите с переключением :)
aleksandrkr
Користувач
Користувач
Повідомлень: 6
З нами з: 23 січня 2013, 09:26

Re: Слайд-шоу

Повідомлення aleksandrkr » 17 березня 2013, 19:28

Замените JS

Код: Виділити все

<script type="text/javascript" >
function click_news(item)
{
    var nod = document.getElementById('slidenews').getElementsByTagName('LI');
   
   
    for(var i = 0; i < nod.length; i++)
    {
         if(nod[i].hasAttribute('class'))   
            nod[i].setAttribute('style', 'display: none;');
         else
            nod[i].getElementsByTagName('A')[0].setAttribute('class', 'slide-tab'); 
    }
     
     nod[Number(item)].getElementsByTagName('A')[0].setAttribute('class', 'slide-tab current');   
     nod[Number(item + (nod.length / 2))].setAttribute('style', 'display: list-item;');
   
}
</script>
таймера правда нету, ну вроде работает
fixer
Користувач
Користувач
Повідомлень: 1
З нами з: 19 серпня 2013, 17:27

Re: Слайд-шоу

Повідомлення fixer » 19 серпня 2013, 17:31

Можна трiшки подробнiше. Дуже потрiбно! Допоможiть.
Що куди помiняти?

Альоша
Користувач
Користувач
Повідомлень: 2
З нами з: 26 вересня 2013, 11:36
Звідки: Кременець

Re: Слайд-шоу

Повідомлення Альоша » 08 жовтня 2013, 12:13

Як заставити працювати слайдшоу? Розпишіть детальніше :) Дякую! :)
Аватар користувача
Dutch
Адміністратор
Адміністратор
Повідомлень: 1187
З нами з: 28 жовтня 2006, 18:49
Звідки: Київ
Дякував (ла): 3 рази
Подякували: 12 рази
Контактна інформація:

Re: Слайд-шоу

Повідомлення Dutch » 16 жовтня 2013, 14:58

Берете любий скрипт слайд-шоу і його розмітку із параметрами відображення закидуєте в новостворений шаблон.


Повернутись до “JUNewsUltra — модуль новин”

Хто зараз онлайн

Зараз переглядають цей форум: 1 і 0 гість