title: Loop jQuery with PHP
body: <p>I am trying to use Backstretch to show photos. The plugin requires this code to correspond with a button to display the photo.</p>
  
  <pre><code>$("#someId").click(function(e) {
      e.preventDefault();
      $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });
  </code></pre>
  
  <p>I have a dynamic site built with PHP, I can loop through my photos to create the thumbnails and links, but I cant get the values into this code. This jQuery code needs to be looped through with the data from the photo PHP loop.
  I tried using a .each() loop to grab the data, but still no luck.</p>
  
  <p>Here is what I have so far</p>
  
  <pre><code>$(".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);
          });
      });
  });
  </code></pre>
  
  <p>Nothing seems, to work, any help would be appreciated. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;?php 
  $category = "urban"; 
  $photos = Photo::find_all_category($category);
  ?&gt;
  
  &lt;script src="js/plugins/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/plugins/jquery.backstretch.js"&gt;&lt;/script&gt;
  
  &lt;div class="row urban"&gt;
      &lt;div class="col-lg-2"&gt;
          &lt;div class="row"&gt;
  &lt;?php foreach($photos as $photo): ?&gt;
          &lt;a class="id" id="&lt;?php echo $photo-&gt;id; ?&gt;" src="admin/images/&lt;?php echo $photo-&gt;filename; ?&gt;"&gt;&lt;img class="img-responsive" src="admin/images/&lt;?php echo $photo-&gt;filename; ?&gt;" alt=""&gt;&lt;/a&gt;
  
  &lt;?php endforeach; ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-10"&gt;
          &lt;div class="backstretch"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>