Блог

У меня есть веб-сайт, над которым я работаю, но есть фотогалерея, над которой я сейчас работаю, с некоторыми проблемами.

Проблема в том, что есть около 30 картинок, и я не хочу иметь 30 блоков кода, вводящих изображение. Я хочу масштабировать его так, чтобы, когда у меня будут альбомы примерно по 100 картинок в каждом, я мог отпустить его.

Я хочу сделать это с помощью Javascript, с плагином jQuery. Как я могу это сделать?

Вот код:

 <div id="main">
            <h1>Suicide Run 2008</h1>
            <div class="panel">
                <ul id="images">
                    <li><a href="images/gallery/2008suiciderun/srun1.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t1.jpg" title="" /></a></li>
                </ul>
                <div id="controls"></div>
                <div class="clear"></div>
            </div>
            <div id="exposure"></div>           
            <div class="clear"></div>
            <div id="slideshow"></div>      
</div>
  

Есть ли способ, которым я могу написать некоторый Javascript, чтобы он генерировал блок кода (от начального тега UL до конечного тега UL), чтобы заполнить его для каждого изображения в моей папке?

Другими словами, если бы я должен был сделать это на Java, я мог бы сделать это таким образом:

 for(int i = 0; i < amountOfPictures; i  )
{
System.out.println("<a href="images/gallery/2008suiciderun/srun" i ".jpg">");
} etc...
  

Но как мне сделать это на Javascript?

Очень признателен! Я уверен, что мое объяснение отстой.

На стороне сервера вам нужно собрать все URL-адреса для изображений. Тогда я бы просто использовал любой шаблонизатор для перебора этих URL-адресов. Однако, если вы должны сделать это с помощью jQuery, тогда вы можете попробовать плагин для шаблонов jQuery.

В javascript есть более элегантные способы сделать это, но это эквивалентный код.

 <div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
        <script type="text/javascript">
        var numPictures = 100; // You'll need to set this yourself.
        for (var i=0, l=numPictures; i < l; i  ) {
          document.write('<li><a href="images/gallery/2008suiciderun/srun'   i   '.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t'   i   '.jpg" title="" /></a></li>');
        }
        </script>
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>
  

Немного более чистая версия с использованием jQuery, как и было запрошено изначально:

 <script type="text/javascript">
window.onload = function() {
  var numPictures = 100; // You'll need to set this yourself.
  var pathPrefix = 'images/gallery/2008suiciderun/srun';
  var thumbPrefix = 'images/gallery/2008suiciderun/thumbs/srun_t';
  var container = $('#images');
  for (var i=0, l=numPictures; i < l; i  ) {
    var li = $('<li>');
    var img = $('<img>').attr('src', thumbPrefix   i   '.jpg');
    var link = $('<a>').attr('href', pathPrefix   i   '.jpg');
    link.append(img);
    li.append(link);
    container.append(li);
  }
}
</script>

<div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>
  

Конечно, как указывали некоторые другие, если вам доступны сценарии на стороне сервера, вам не нужно полагаться на соглашения об именах файлов или точно знать, сколько там изображений, поскольку у вас будет прямой доступ к файловой системе.

Вы тоже можете сделать что-то подобное:

 $('<div id="main"></div>')
    .append($('<h1></h1>').text(titleVariable))  
    .append($('<div class="panel"></div>'))  
    .appendTo('body');
  

Это не все, но это сработало бы. Я бы предложил сгенерировать код на стороне сервера для начальной загрузки, а затем, если вы загружаете больше через ajax или что-то еще, вы можете это сделать.

Хотя, возможно, было бы быстрее сгенерировать весь HTML на стороне сервера.

На самом деле javascript является неподходящим решением для этого.

Вам уже нужно знать, сколько изображений помещается в каждую папку на уровне сервера, что означает какой-то исполняемый сервером код (PHP, Java, .Net, что угодно).

Вы должны просто написать страницу динамически (как в этом примере PHP):

 ...
<ul id="images">
  <?php 
   $files = glob($folderspec.'*.php');
   for ($ii=0; $ii = count($files); $ii  )
   {
     echo '<li><a href="images/gallery/'.$folderspec.'/srun'.$ii.'.jpg" ...[ etc ]
   }
 ?>
</ul>
...
  

Это лучше для клиента, для автоматизированных поисковых систем (Google) и практически для всего остального. Хотя это можно сделать как Javascript, используя многие из решений выше, обычно это не следует делать таким образом.