Smf otomatik resim slayt

Başlatan snrj, 18 May 2014 14:29

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,077

  2. 584

  3. 958

belirlediğiniz bölümlerdeki ilk resimi alır slider ekler

sitenizde uygun yere alttaki kodu ekleyin index.template.php veya portal kulananlar php blok olarak ekleyebilir
$boards=array(1,2,3,4,5); bölümlerinizi burdan ayarlayabilirsiniz
echo '
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$.fn.infiniteCarousel = function () {
    function repeat(str, num) {
        return new Array( num   1 ).join( str );
    }
    return this.each(function () {
        var $wrapper = $(\'> div\', this).css(\'overflow\', \'hidden\'),
            $slider = $wrapper.find(\'> ul\'),
            $items = $slider.find(\'> li\'),
            $single = $items.filter(\':first\'),
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn\'t include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);           
            if (($items.length % visible) != 0) {
            $slider.append(repeat(\'<li class="empty" />\', visible - ($items.length % visible)));
            $items = $slider.find(\'> li\');
        }
        $items.filter(\':first\').before($items.slice(- visible).clone().addClass(\'cloned\'));
        $items.filter(\':last\').after($items.slice(0, visible).clone().addClass(\'cloned\'));
        $items = $slider.find(\'> li\');
        $wrapper.scrollLeft(singleWidth * visible);
            function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            $wrapper.filter(\':not(:animated)\').animate({
                scrollLeft : \' =\'   left
            }, 500, function () {
                if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
  } else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
  currentPage = page;
   });                         
  return false;
}
$wrapper.after(\'<a class="icon-angle-left"></a><a class="icon-angle-right"></a>\');
$(\'a.icon-angle-left\', this).click(function () {
return gotoPage(currentPage - 1);               
  });
$(\'a.icon-angle-right\', this).click(function () {
return gotoPage(currentPage   1);
});
  $(this).bind(\'goto\', function (event, page) {
gotoPage(page);
});
}); 
};
$(document).ready(function () {
  $(\'.infiniteCarousel\').infiniteCarousel();
});
//]]>
</script>';
global $smcFunc, $scripturl, $settings, $options, $txt ,$context, $modSettings;
$boards=array(1,2,3,4,5);
$request = $smcFunc['db_query']('', '
  SELECT t.id_topic, m.subject, m.body
  FROM {db_prefix}topics AS t
   INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
  WHERE t.id_board IN ({array_int:boards})
  ORDER BY t.id_topic DESC
       LIMIT {int:limit}',
  array(
    'boards' => $boards,
               'limit' => 50,
  )
);

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
     'id_topic' => $row['id_topic'],
     'subject' => $row['subject'],
     'first_image'  => preg_match_all('~\[img.*?\]([^\]] )\[\/img\]~i', $row['body'],  $images) ? '<img src="' . $images[1][0] . '" alt="' .  $row['subject'] . '" height="145" width="102"/>      ' : '',
  );
$smcFunc['db_free_result']($request);
     echo '
    <div id="caja-carrusel">
<div class="infiniteCarousel">
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<ul>';
foreach ($topics as $topic)
  echo '
<li><a  href="', $scripturl, '?topic=', $topic['id_topic'], '.0">',  $topic['first_image'], ' </a></li>  ';
echo ' </ul>
</div>
</div></div>';

index.css de en alta ekleyin

.infiniteCarousel{width:1015px;position:relative;height:170px;margin:0px;}

.infiniteCarousel .wrapper{width:985px;overflow:auto;height:160px;margin:0 0px 0 0px;position:absolute;top:3px;background:#202020;border-radius:6px;}

.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}

.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}

.infiniteCarousel ul li{display:block;float:left;padding:9px 5px;height:142px;width:99px;}

.infiniteCarousel ul li a img{display:block;color:#000;}

.infiniteCarousel .icon-angle-right{right:-11px;font-size:60px;top:67px;position:absolute;cursor:pointer;}

.infiniteCarousel .icon-angle-left{left:-41px;font-size:60px;top:67px;position:absolute;cursor:pointer;}
.icon-angle-left:before {

    content: "<";

}

.icon-angle-right:before {

    content: ">";

}
.pager-home{display:inline;}


MENU ×