Konudaki ilk resimi çekme ve slider (tüm bölümlerden)

tam istediğim gibi olmadı ama bu şekli ile paylaşayım isteyen arkadaşlar kendine göre düzeltsin
resim olmayan konular için default resim eklemedim basitçe eklenebilir sorulması durumunda anlatırız
örnek görüntü ben loacalde deepblue temasına ekledim vs...


https://desandro.github.io/3dtransforms/
Carousel 1 kullanılmıştır sizler başka sliderlar kullabilirsiniz



boardindex.template.php de bul

Kod Seç Genişlet

?>öncesine ekle

Kod Seç Genişlet

function sonfilm()
{
global $smcFunc, $scripturl;
$boards = array();
$request = $smcFunc['db_query']('order_by_board_order', '
SELECT b.id_board, b.name AS board_name, c.name AS cat_name
FROM {db_prefix}boards AS b
LEFT JOIN {db_prefix}categories AS c ON (c.id_cat = b.id_cat)',
array(
)
);
while ($row = $smcFunc['db_fetch_assoc']($request))
$boards[] = $row['id_board'];
$smcFunc['db_free_result']($request);

$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' => 9,
)
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
'id_topic' => $row['id_topic'],
'subject' => $row['subject'],
'body' => $row['body'],
'first_image'  => preg_match_all('~\[img.*?\]([^\]]+)\[\/img\]~i', $row['body'],  $images) ? '<img src="' . $images[1][0] . '" alt="' .  $row['subject'] . '" height="150" width="200" />      ' : '',
  );
$smcFunc['db_free_result']($request);
echo'<section class="container">
  <div id="carousel">';
foreach ($topics as $topic)
    {
if($topic['first_image'])
{
echo ' <figure><a  href="', $scripturl, '?topic=', $topic['id_topic'], '.0">',  $topic['first_image'], '</a></figure>';
}
}
echo'  </div>
</section><br><br><br>
  <section id="options">
  <p id="navigation">
      <button id="previous" data-increment="-1">Previous</button>
      <button id="next" data-increment="1">Next</button>
    </p>
  </section>
  <script src="https://desandro.github.io/3dtransforms/js/utils.js"></script>

  <script>
    var init = function() {
      var carousel = document.getElementById(\'carousel\'),
          navButtons = document.querySelectorAll(\'#navigation button\'),
          panelCount = carousel.children.length,
          transformProp = Modernizr.prefixed(\'transform\'),
          theta = 0,

          onNavButtonClick = function( event ){
            var increment = parseInt( event.target.getAttribute(\'data-increment\') );
            theta += ( 360 / panelCount ) * increment * -1;
            carousel.style[ transformProp ] = \'translateZ( -288px ) rotateY(\' + theta + \'deg)\';
          };

      for (var i=0; i < 2; i++) {
        navButtons[i].addEventListener( \'click\', onNavButtonClick, false);
      }

    };

    window.addEventListener( \'DOMContentLoaded\', init, false);
  </script>';
}

bul

Kod Seç Genişlet

echo '
<div id="boardindex_table">öncesine ekle

Kod Seç Genişlet

sonfilm();
index.css de en son ekle

Kod Seç Genişlet

   .container {
      width: 210px;
      height: 140px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1100px;
         -moz-perspective: 1100px;
           -o-perspective: 1100px;
              perspective: 1100px;
    }

    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform: translateZ( -288px );
         -moz-transform: translateZ( -288px );
           -o-transform: translateZ( -288px );
              transform: translateZ( -288px );
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }


    #carousel figure {
      display: block;
      position: absolute;
      width: 186px;
      height: 116px;
      left: 10px;
      top: 10px;
      border: 2px solid black;
      line-height: 116px;
      font-size: 80px;
      font-weight: bold;
      color: white;
      text-align: center;
    }

    #carousel figure:nth-child(1) { background: hsla(   0, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(2) { background: hsla(  40, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(3) { background: hsla(  80, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(4) { background: hsla( 120, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(5) { background: hsla( 160, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(6) { background: hsla( 200, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(7) { background: hsla( 240, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(8) { background: hsla( 280, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(9) { background: hsla( 320, 100%, 50%, 0.8 ); }

    #carousel figure:nth-child(1) {
      -webkit-transform: rotateY(   0deg ) translateZ( 288px );
         -moz-transform: rotateY(   0deg ) translateZ( 288px );
           -o-transform: rotateY(   0deg ) translateZ( 288px );
              transform: rotateY(   0deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(2) {
      -webkit-transform: rotateY(  40deg ) translateZ( 288px );
         -moz-transform: rotateY(  40deg ) translateZ( 288px );
           -o-transform: rotateY(  40deg ) translateZ( 288px );
              transform: rotateY(  40deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(3) {
      -webkit-transform: rotateY(  80deg ) translateZ( 288px );
         -moz-transform: rotateY(  80deg ) translateZ( 288px );
           -o-transform: rotateY(  80deg ) translateZ( 288px );
              transform: rotateY(  80deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(4) {
      -webkit-transform: rotateY( 120deg ) translateZ( 288px );
         -moz-transform: rotateY( 120deg ) translateZ( 288px );
           -o-transform: rotateY( 120deg ) translateZ( 288px );
              transform: rotateY( 120deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(5) {
      -webkit-transform: rotateY( 160deg ) translateZ( 288px );
         -moz-transform: rotateY( 160deg ) translateZ( 288px );
           -o-transform: rotateY( 160deg ) translateZ( 288px );
              transform: rotateY( 160deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(6) {
      -webkit-transform: rotateY( 200deg ) translateZ( 288px );
         -moz-transform: rotateY( 200deg ) translateZ( 288px );
           -o-transform: rotateY( 200deg ) translateZ( 288px );
              transform: rotateY( 200deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(7) {
      -webkit-transform: rotateY( 240deg ) translateZ( 288px );
         -moz-transform: rotateY( 240deg ) translateZ( 288px );
           -o-transform: rotateY( 240deg ) translateZ( 288px );
              transform: rotateY( 240deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(8) {
      -webkit-transform: rotateY( 280deg ) translateZ( 288px );
         -moz-transform: rotateY( 280deg ) translateZ( 288px );
           -o-transform: rotateY( 280deg ) translateZ( 288px );
              transform: rotateY( 280deg ) translateZ( 288px );
    }
    #carousel figure:nth-child(9) {
      -webkit-transform: rotateY( 320deg ) translateZ( 288px );
         -moz-transform: rotateY( 320deg ) translateZ( 288px );
           -o-transform: rotateY( 320deg ) translateZ( 288px );
              transform: rotateY( 320deg ) translateZ( 288px );
    }