尝试使用 json 文件和 Getjson 来填充
;与 img src

发布于 2024-10-29 17:45:08 字数 1567 浏览 1 评论 0原文

这是我到目前为止所拥有的。我正在尝试解析 json 文件并获取 img 路径和宽度，获取 GETJson json 中每条记录的返回值，并将其附加到“Gallery”内一个名为thumbs 的类的无序列表中。因此，我可以读取 json 文件并填充它，而不是在 html 中添加几行代码“li img src= path of images” width= "。

我的 json 如下所示：

[ { "image":"滑块/img/img1.jpg", “宽度”：400 }, { "image":"滑块/img/img2.jpg", “宽度”：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>

感谢您的帮助

我在 json 文件描述中错误地输入了 img 名称。我已经拼写正确了。当我运行 html 时，会发生两件事。图像根本不显示。其他一切都出现背景等图像确实出现。当我执行警报（项目）时，我可以看到 li 正在填充。基本上，我有一个名为thumbs_1的div id=Gallery和ul，其class =thumbs

div id = 画廊
ul id="thumbs_1" class="thumbs"
李> "img src="images/image_11.jpg" width=600" 这样一共有11行。我只想使用 GetJson 动态放置同一行代码，而不是将其编码在 HTML 中。然后一旦 DIV 被填充
使用这个
$().ready(函数(){ $('#Gallery').flickrGallery({
调用特定函数它已经开发出来并致力于创建一个照片库。抱歉造成任何困惑，感谢您已经提供的帮助。

原文

This is what I have so far. I'm trying to parse json file and grab img path and width get the return for each record in GETJson json and append to "Gallery" Inside an unordered list with a class named thumbs. So instead of having several lines of code "li img src= path of images" width= " in the html, I could just read json file and populate this.

My json looks like this:

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

Here's the Getjson logic.

<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>

Thank You for any help

I incorrectly type the img name in the json file description. I have it spelled out correctly. When I run the html two things happen. The images do not show at all. Everything else appears background etc. for the images does appear. When I do an alert(items) I can see the li populating.
Basically, I have a div id=Gallery and and ul inside the div named thumbs_1 with class =thumbs

div id = GALLERY
ul id="thumbs_1" class="thumbs"
li> "img src="images/image_11.jpg" width=600" there are a total of 11 lines like this. Instead of having this harcoded in the HTML I just want to dynamically place the same line of code using GetJson. Then once the DIV is populated
use this
$().ready(function(){
$('#Gallery').flickrGallery({
which calls a specfic function
that has been developed already and works to creates a photo gallery.
Sorry for any confusion and Thank you for already helping out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

同展鸳鸯锦 2024-11-05 17:45:09

你的json作为最后一个“}”之后的额外逗号，我实际上不确定你可以在数组中“.append”。您可以尝试类似的操作

var items = '<ul>';

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

，然后像这样在#gallery 中附加“items”var，

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

但我不太确定您要做什么。我假设您使用“alert()”测试了代码的每一部分，看看它是否运行良好。

Your json as an extra coma after the last "}" and I'm not actually sure you can ".append" in an array. You could try something like that

var items = '<ul>';

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

And then append the 'items' var in #gallery like this

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

But i'm not really sure about what you are trying to do. I assume you tested every bit of the code with "alert()" to see if it runs well.

回复收藏 0 原文

书间行客 2024-11-05 17:45:09

如果没有 api 密钥，我无法让 flickrGallery 工作，但我创建了两个示例供您使用 GalleryView 进行查看。一种使用 jQuery 模板，一种不使用。

使用 JSON 的图库演示

在每个循环中尝试一下（或看一下）

$.each(result, function() {
   $("#thumbs_1").append(
       $("<li>").append(
          $("<img>").attr("src", this.image).attr("width", this.width).addClass("thumbs")
       )
   );
});

I couldn't get flickrGallery to work without an api key but I've created two examples for you to look through using GalleryView. One using jQuery templates and one without.

Gallery Demo with JSON

Try this in your each loop (or take a look)

$.each(result, function() {
   $("#thumbs_1").append(
       $("<li>").append(
          $("<img>").attr("src", this.image).attr("width", this.width).addClass("thumbs")
       )
   );
});

回复收藏 0 原文

负佳期 2024-11-05 17:45:09

你的 .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>

you have an extra concatenation in your .each, and should use items.push instead of items.append (and there's that extra comma at the end of the JSON)...the following works (with your assertion that the gallery creation works)

<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>

回复收藏 0 原文

神经大条 2024-11-05 17:45:09

<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>

<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 原文

~没有更多了~