2016-05-30 12 views
0

私は写真を表示するためにBackstretchを使用しようとしています。プラグインでは、写真を表示するボタンに対応するためにこのコードが必要です。PHPを使用したループjQuery

$("#someId").click(function(e) { 
    e.preventDefault(); 
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg'); 
}); 

私はPHPで構築された動的なサイトを持って、私はサムネイルとリンクを作成するために私の写真をループすることができますが、私は、このコードに値を取得傾けます。このjQueryコードは、写真のPHPループからのデータをループさせる必要があります。 私は.each()ループを使ってデータを取得しようとしましたが、まだ運がありません。ここで

は、私がこれまで

$(".id").each(function(){ 
    var id; 
    var photo; 

    $(this).attr('id', function(i, val){ 
     id = '#' + val; 
     $(".img").each(function(){ 
      $(this).attr('src', function(i, val){ 
       photo = val; 
      }); 
     }); 
console.log(id) 
console.log(photo) 
     $(id).click(function(e) { 
      e.preventDefault(); 
      $.backstretch(photo); 
     }); 
    }); 
}); 

何も任意の助けをいただければ幸い、動作するように、思わない持っているものです。

HTML

<?php 
$category = "urban"; 
$photos = Photo::find_all_category($category); 
?> 

<script src="js/plugins/jquery.js"></script> 
<script src="js/plugins/jquery.backstretch.js"></script> 

<div class="row urban"> 
    <div class="col-lg-2"> 
     <div class="row"> 
<?php foreach($photos as $photo): ?> 
     <a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a> 

<?php endforeach; ?> 
     </div> 
    </div> 
    <div class="col-lg-10"> 
     <div class="backstretch"></div> 
    </div> 
</div> 
+1

HTMLコードを持参してください。あなたがネストされた**をそれぞれ間違って使用しているようです。 –

答えて

0

は私が

$(".id").each(function(){ 
var id; 
var photo; 
id = '#' + (this).getAttribute('id'); 
console.log(id); 
photo = (this).getAttribute('src'); 
console.log(photo); 
$(id).click(function(e) { 
     e.preventDefault(); 
     $(".backstretch").backstretch(photo); 
    }); 
}); 

にフォーマットを変更し、また、私は二回のjQueryを含めた見つけました。それを削除し、それが動作します。ありがとうございました!

0

あなたは、単にクラス名を対象とすることができます

$('.id').click(function(ev){ 
    ev.preventDefault(); 
    $(".backstretch").backstretch($(this).attr('src')); 
}); 
関連する問題