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

Başlatan snrj, 17 Oca 2017 18:34

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

snrj

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 :D
ö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ç]
?>öncesine ekle
Kod [Seç]
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ç]
echo '
<div id="boardindex_table">
öncesine ekle
Kod [Seç]
sonfilm();
index.css de en son ekle
Kod [Seç]
   .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 );
    }