Kayan Resim - Belirtilen konu resimleri çeker

Otomatik olarak Smf belirtilen bölümlerde İlk resmi çekicek şekilde kapak slider olarak.

flimslider(); olarak index.template.php kullanın

index.template.php açın öncesine ?>  ekle

Kod Seç Genişlet

function flimslider() {

    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);

$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>';
}bunuda index.css ekleyin

Kod Seç Genişlet

.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;}Bu kadar.
flimslider(); ile istediğiniz yerde kullanabilirsiniz.$boards = array(1,2); 1,2 bölüm idlerini eklemeyi unutmayın.
index.template.php bul

Kod Seç Genişlet

global $context, $settings, $options, $scripturl, $txt, $modSettings;altına ekle

Kod Seç Genişlet

flimslider();Resimli demo





Sade HTML olarak buyrun.


indirmek için:
http://yadi.sk/d/FhY6erU1DyrD6

Kod Seç Genişlet

<style type='text/css'>
body {
 background-color: #F1F1F1;
 margin:0;
 color:#333;
 font:normal normal 13px/1.5 "Open Sans","Segoe UI","Helvetica Neue",Arial,Sans-Serif;
 font-size:13px;
}
a:hover {color:#c0392b;}
.infiniteCarousel{width:900px;position:relative;height:170px;margin:0 0 0 10px;}
.infiniteCarousel .wrapper{width:845px;overflow:auto;height:170px;margin:0 25px 0 25px;position:absolute;top:0;}
.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;height:142px;width:102px;}
.infiniteCarousel ul li a img{display:block;color:#000;}
.infiniteCarousel .icon-angle-right{right:-5px;font-size:60px;top:27px;position:absolute;cursor:pointer;}
.infiniteCarousel .icon-angle-left{left:-10px;font-size:60px;top:27px;position:absolute;cursor:pointer;}
.pager-home{display:inline;}
.icon-angle-left:before {
    content: "<";
}
.icon-angle-right:before {
    content: ">";
}
</style>

<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>

<!-- Empieza la galería de imágenes del carrusel -->
<div id='caja-carrusel'>
<div class='infiniteCarousel'>
<div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '>
<ul>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/3/55539.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/51811.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/4066.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/24135.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/50361.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/9391.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/5123.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/9/9453.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/11460.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/11/33657.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/52265.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/41125.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/17405.jpg' title='Lorum Ipsum'/></a></li>
</ul>
</div>
</div></div>

Cemo bu bu çok iyimiş bir ara uygulayacağım .

Cemo bu html kod otomatik olarak konu mu çekmekte . Üstteki phpler otomatik çekiyor ama bunlar nasıl oluyor yardımcı olurmusun .

Cemo bu html kod otomatik olarak konu mu çekmekte . Üstteki phpler otomatik çekiyor ama bunlar nasıl oluyor yardımcı olurmusun .

altdaki direk Html yani bir eklenti vb.. değil direk index.html gibi dosyalarda kullanıyorsun.Diğeri zaten belli konulardan varsa resmi çekiyor.hata vs.. olmaması lazım çünkü denedik.