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

Başlatan snrj, 17 Mar 2017 18:34

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,263

  2. 596

  3. 1077

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


Benzer Konular (3)


MENU ×