PHP ile dinamik bir listesini oluşturarak yalnızca bir kez ilk çocuk: bir sınıf uygulamak?

4 Cevap php

Tamam, bu yüzden PHP kullanarak bir dizin tarafından görüntülerin bir listesini yükleme ediyorum:

<?php
    # fetch image details
    $images = getImages("marc/img/livingrooms/");

    # display on page
    foreach($images as $img) {
        echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
    }
?>

Sonra bir galeri içine bu öğeleri stil Galleria JQuery eklentisi kullanıyorum:

$(document).ready(function(){

    $('.dynolist').addClass('gallery_group'); // adds new class name to maintain degradability

    $('ul.gallery_group').galleria({
        history   : true, // activates the history object for bookmarking, back-button etc.
        clickNext : true, // helper for making the image clickable
        insert    : '#main_image', // the containing selector for our main image
        onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

            // fade in the image & caption
            image.css('display','none').fadeIn(1000);
            caption.css('display','none').fadeIn(1000);

            // fetch the thumbnail container
            var _li = thumb.parents('li');

            // fade out inactive thumbnail
            _li.siblings().children('img.selected').fadeTo(500,0.3);

            // fade in active thumbnail
            thumb.fadeTo('fast',1).addClass('selected');

            // add a title for the clickable image
            image.attr('title','Next image >>');
        },
        onThumb : function(thumb) { // thumbnail effects goes here

            // fetch the thumbnail container
            var _li = thumb.parents('li');

            // if thumbnail is active, fade all the way.
            var _fadeTo = _li.is('.active') ? '1' : '0.3';

            // fade in the thumbnail when finnished loading
            thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

            // hover effects
            thumb.hover(
                function() { thumb.fadeTo('fast',1); },
                function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
            )
        }
    });
});

Sorunu ben ilk öğe bu listeden "aktif" bir sınıf çekti, bu nedenle ilk görüntü slayt yüklenecek vermek gerekir olmasıdır. Her şey ilk görüntü yüklenen almak dışında, şu anda çalışıyor.

Herhangi bir öneriniz?

4 Cevap

Bu deneyin:

# display on page
$counter = 0;
foreach($images as $img) {

  if ($counter == 0) { // first
    echo "<li class=\"active\"><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
  }
  else
  {
    echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
  }

  $counter++;
}

$('selector:first').addClass('active');

Belki mi?

Ya da ne

# display on page
$class = 'class="active" ';
foreach($images as $img) {
    echo "<li><img ".$class."src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
    $class="";
}

Eğer PHP tarafında yapmak istiyorsanız, size foreach döngüsünde, kaç görüntü sergiledi, saymak - ve 0 gösterilmiştir varsa, şu anda olan birine bir class="active" ekleyin yankılanıyordu.

Örneğin, böyle bir şey hile yapmak gerekir:

$counter = 0;
foreach($images as $img) {
    echo "<li><img src=\"{$img['file']}\" ";
    if ($counter === 0) {
        echo 'class="active"';
    }
    echo " title=\"\" alt=\"\"></li>\n";
    $counter++;
}

Ilk kez, $counter 0 döngü olacak olacak, ve class="active" yankılandı olacak; sonraki kere, artık 0 olmayacak ve hiçbir addtionnal active class eklenecektir.

Jquery:

$(".gallery_group li:first-child").addClass("active");

Php:

# display on page
$first = true;
foreach($images as $img) {
    echo "<li " . ($first ? "class='active'" : "") . "><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
    $first = false;
}

etiketler