Попытка использовать файл json и Getjson для заполнения <li>с помощью img src - PullRequest
Новая
       24

Попытка использовать файл json и Getjson для заполнения <li>с помощью img src

1 голос
/ 01 апреля 2011

Это то, что я имею до сих пор.Я пытаюсь проанализировать файл json, получить путь и ширину img, получить результат для каждой записи в GETJson json и добавить в «Галерею» внутри неупорядоченного списка класс с именем thumbs.Таким образом, вместо нескольких строк кода "li img src = path of images" width = "в html, я мог бы просто прочитать файл json и заполнить его.

Мой json выглядит следующим образом:

[{"image": "sliders / img / img1.jpg", "width": 400}, {"image": "sliders / img / img2.jpg", "width": 400},]

Вот логика Getjson. 

<script type="text/javascript">
$().ready(function(){
    $.getJSON('fred.json', function(data) {
         //Collection of li elements
         var items = [];

          $.each(data, function(key, val) {
            items.append('<li><img src="' + val.image + '+ '" width="' 
                               + val.width + '" /></li>');
            });

          $('<ul/>', {
            'class': 'thumbs',
            html: items.join('')
          }).appendTo('#Gallery');

          //Once all ul are created call the gallery function
          $('#Gallery').flickrGallery();
    });
});
</script>

Спасибо за любую помощь

Я неправильно ввел имя img в описании файла json. У меня оно естьПравильно прописано. Когда я запускаю html, происходят две вещи. Изображения не отображаются вообще. Все остальное отображается фоном и т. д. Изображения появляются. Когда я делаю предупреждение (элементы), я вижу заполнение ли. В основном,У меня есть div id = Галерея и ul внутри div с именем thumbs_1 с class = thumbs

div id = GALLERY
ul id = "thumbs_1" class = "thumbs"
li> "img src =" images / image_11.jpg "width = 600" в общей сложности 11 строк, подобных этой. Вместо того, чтобы это кодировать в HTML, я простоМуравей для динамического размещения одной и той же строки кода с помощью GetJson.Затем, когда DIV заполнен
, используйте эту
$ (). Ready (function () {$ ('# Gallery'). FlickrGallery ({
, которая вызывает специальную функцию, которая уже разработана и работаетсоздает фотогалерею. Извините за путаницу и спасибо за помощь.

Ответы [ 4 ]

1 голос
/ 01 апреля 2011

Мне не удалось заставить flickrGallery работать без ключа API, но я создал два примера, которые вы можете просмотреть с помощью GalleryView. Один использует шаблоны JQuery, а другой - нет.

Галерея Демо с JSON

Попробуйте это в каждом цикле (или посмотрите) 

$.each(result, function() {
   $("#thumbs_1").append(
       $("<li>").append(
          $("<img>").attr("src", this.image).attr("width", this.width).addClass("thumbs")
       )
   );
});
1 голос
/ 01 апреля 2011

Ваш json как дополнительная кома после последнего "}", и я на самом деле не уверен, что вы можете ".append" в массиве. Вы можете попробовать что-то подобное 

var items = '<ul>';

          $.each(data, function(key, val) {
            items += '<li><img src="' + val.image + '+ '" width="' 
                               + val.width + '" /></li>';
            });
          items += '</ul>';

А затем добавьте переменную 'items' в #gallery следующим образом 

$('#gallery').append(items);

Но я не совсем уверен в том, что ты пытаешься сделать. Я предполагаю, что вы проверили каждый бит кода с помощью «alert ()», чтобы проверить, хорошо ли он работает.

0 голосов
/ 27 июля 2013 
<script type="text/javascript">

$.getJSON('test.json',function(data)
{
    alert(JSON.stringify(data));
    $.each(data, function(i,value)
        {
    //  alert(value.NewsCategory.id + ":" + value.NewsCategory.name + " " + value.NewsCategory.organization_id + " " + value.NewsCategory.last_updated);

            var a = value.NewsCategory;
            var news = value.News;
                $.each(news, function(j,details)
                    {
                //  alert(details.id + " " + details.title + " "+ details.date_created + " " + details.body + " " +details.thumb);
                        content+= '<p>'+ "ID : "+ news[j].id + " Date Created : " + news[j].date_created + " Title : " + news[j].title +'</p>';
                        content+= '<a href = #>' + '<img src="' + news[j].thumb + '"/>' + '</a>';
                        content+= '<br/>';
                     });

                $(content).appendTo("#posts");
         });
 });

/ *]]> * / 

<body>
    <div class="container">
            <div class="span-24">
                    <div id="posts">
                    </div>
            </div>
    </div>

0 голосов
/ 01 апреля 2011

у вас есть дополнительная конкатенация в вашем .each, и вы должны использовать items.push вместо items.append (и есть дополнительная запятая в конце JSON) ... следующие работы (с вашим утверждением, что галереятворчество) 

<script type="text/javascript">
$().ready(function(){
    $.getJSON('fred.json', function(data) {
         //Collection of li elements
         var items = [];

          $.each(data, function(key, val) {
            items.push('<li><img src="' + val.image + '" width="' 
                               + val.width + '" /></li>');
            });

          $('<ul/>', {
            'class': 'thumbs',
            'id':'thumbs_1',
            html: items.join('')
          }).appendTo('#Gallery');

          //Once all ul are created call the gallery function
          $('#Gallery').flickrGallery();
    });
});
</script>
...