Adding descriptions to images displayed in bluimp image gallery

Rails
1

Why is adding descriptions a whole javascript task in bluimp image
gallery
Couldn’t the author have worked it out so that all I’d have to do is
provide the descriptions in the html They provide a data-description
option
to use in my html anchor containers but that doesn’t do anything by
itself
without having to do a significant little bit of js coding Makes me
wonder
if there’s something better than bluimp This is a real bummer as we used
to
say

2

On 28 February 2016 at 11:44, fugee ohu [email protected] wrote:

Why is adding descriptions a whole javascript task in bluimp image gallery
Couldn’t the author have worked it out so that all I’d have to do is provide
the descriptions in the html They provide a data-description option to use
in my html anchor containers but that doesn’t do anything by itself without
having to do a significant little bit of js coding Makes me wonder if
there’s something better than bluimp This is a real bummer as we used to say

Or to rephrase your question:

Bluimp is a great gem which does almost exactly what I want and I am
very grateful to the authors for allowing me to benefit from their
work. There is one little feature missing so I think I will fork
their code and add that feature and send a pull request back to the
authors so it can be added to the gem and the whole community may
benefit. Googling for
adding descriptions to images displayed in bluimp image gallery
shows a number of good hits so I don’t it should be too difficult.

Colin

3

Why’s it great ? I might agree but I’m beginning to ask myself what I
needed it for in the first place I could have loaded another page to
display images with captions or whatever i want What do i need them
displayed in javascript for anyway Can you tell me what makes bluimp
image
gallery a better approach please?

4

On Sunday, February 28, 2016 at 8:51:51 AM UTC-5, Colin L. wrote:

without
authors so it can be added to the gem and the whole community may
benefit. Googling for
adding descriptions to images displayed in bluimp image gallery
shows a number of good hits so I don’t it should be too difficult.

Colin

Here’s the code they provide, I tried but it doesn’t have any effect so
far

blueimp.Gallery(
document.getElementById(‘links’),
{
onslide: function (index, slide) {
var text =
this.list[index].getAttribute(‘data-description’),
node = this.container.find(’.description’);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);

5

On Sunday, February 28, 2016 at 8:51:51 AM UTC-5, Colin L. wrote:

without
authors so it can be added to the gem and the whole community may
benefit. Googling for
adding descriptions to images displayed in bluimp image gallery
shows a number of good hits so I don’t it should be too difficult.

Colin

Yea you’re right Colin He actually gives you the js code in the docs too
I
think I need to realize that gems can’t do javascript for me and then I
wouldn’t be surprised that such a simple thing like displaying a caption
along with the image means i’m gonna have to write/add some js ~ thanks,
fugee

6

On Sunday, February 28, 2016 at 3:01:35 PM UTC-5, Walter Lee D.
wrote:

gallery

Or to rephrase your question:
Colin

To view this discussion on the web visit

https://groups.google.com/d/msgid/rubyonrails-talk/395919ba-62b9-46a1-b3be-b4e2ba84f63c%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

hi, thanks, i dunno what you mean by an empty html element with the
classname description, i think you mean

but
that’s not my view Here’s my view:

<% @profile.pictures.in_groups_of(5, false) do |row_tasks| %> <% for task in row_tasks do %> <% end %> <% end %>
<%= image_tag(task.name.thumb) %>
7

On Feb 28, 2016, at 7:24 PM, fugee ohu [email protected] wrote:

[snip]

            node = this.container.find('.description');
<% for task in row_tasks do %> <a href= "<%= task.name %>" data-description = "<%= task.comment %>"

data-gallery ><%= image_tag(task.name.thumb) %>

<% end %>
<% end %>

Yes, you did get what I meant. Reading through the portion of the script
you provided, I can’t see where that element needs to be. Perhaps it is
added by the lightbox code when it creates the overlay elements. In any
case, you have added the correct data attributes to the link, so that
part looks right. In the example for the gallery, was there any
reference to creating a separate structure in the page html to receive
the description? In the documentation, do they have an example page
coded in HTML that includes a secondary overlay element or similar? Or
is it all generated by the JS code when the page loads?

Walter

8

having to do a significant little bit of js coding Makes me wonder if
adding descriptions to images displayed in bluimp image gallery
var text = this.list[index].getAttribute(‘data-description’),
For the preceding line to work, your element needs to have the attribute
data-description on it. Does it?

            node = this.container.find('.description');

For the preceding line to work, you need to have an empty HTML element
with the classname description present in the page, within the container
element of the slide (no clue where that means, I’m just interpreting
the code for you). If that element exists, then it will be emptied and
re-filled with the description.

        node.empty();
        if (text) {
            node[0].appendChild(document.createTextNode(text));
        }
    }
}

);

My guess is that you are missing one or more of these antecedents, and
without them, the JS won’t have anything to work with.

Walter

9

On Monday, February 29, 2016 at 9:39:28 AM UTC-5, Walter Lee D.
wrote:

so far

            node[0].appendChild(document.createTextNode(text));

task.comment %>" data-gallery ><%= image_tag(task.name.thumb) %>
looks right. In the example for the gallery, was there any reference to
Groups “Ruby on Rails: Talk” group.

To unsubscribe from this group and stop receiving emails from it, send
an email to [email protected] <javascript:>.
To post to this group, send email to [email protected]
<javascript:>.
To view this discussion on the web visit

https://groups.google.com/d/msgid/rubyonrails-talk/ed810211-4222-4a87-978f-bf9942b78193%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

No, there isn’t The docs are at
Gallery/README.md at master · blueimp/Gallery · GitHub and the
relevant section is headed Additional Gallery Elements about 3/4 of the
way
down ~ fugee

10

[snip]

);
<% @profile.pictures.in_groups_of(5, false) do |row_tasks| %>

No, there isn’t The docs are at
Gallery/README.md at master · blueimp/Gallery · GitHub and the relevant
section is headed Additional Gallery Elements about 3/4 of the way down ~ fugue

Start here, and see that you do need to add a description element
(empty) if you want it to be updated with the value you set in the
data-description attribute.

Walter

11

On Monday, February 29, 2016 at 9:22:55 PM UTC-5, Walter Lee D.
wrote:

On Feb 28, 2016, at 7:24 PM, fugee ohu [email protected] wrote:

{

with the classname description present in the page, within the container

);

the JS code when the page loads?

To view this discussion on the web visit
Start here, and see that you do need to add a description element (empty)
You received this message because you are subscribed to the Google

I still haven’t gotten this working

12

On Monday, February 29, 2016 at 9:22:55 PM UTC-5, Walter Lee D.
wrote:

On Feb 28, 2016, at 7:24 PM, fugee ohu [email protected] wrote:

{

with the classname description present in the page, within the container

);

the JS code when the page loads?

To view this discussion on the web visit
Start here, and see that you do need to add a description element (empty)
You received this message because you are subscribed to the Google

OK Sorry Actually I have it in my view already The author calls it the
widget here it is from my view:

‹ › ×
    13

    On Tuesday, 1 March 2016 18:07:51 UTC-5, fugee ohu wrote:

    On Monday, February 29, 2016 at 9:39:28 AM UTC-5, Walter Lee D.

                node = this.container.find('.description');
        }

    hi, thanks, i dunno what you mean by an empty html element with the
    <% end %>
    creating a separate structure in the page html to receive the description?
    To unsubscribe from this group and stop receiving emails from it,
    relevant section is headed Additional Gallery Elements about 3/4 of the way

    For more options, visit https://groups.google.com/d/optout.

    I still haven’t gotten this working

    Since it’s still not working, I’d recommend you start checking things
    one-by-one to verify they are working as you expect.

    • does the gallery work other than the description field? Are there
      any
      errors / warnings in the browser console? If so, deal with those before
      moving on.

    • add a breakpoint inside the ‘onslide’ handler the documentation
      provides.
      Are things as expected? Are the “text” and “node” variables getting what
      you’d expect?

    • if everything looks OK but things still don’t work, I’d recommend
      trying
      to create a smaller “test case” Rails application that demonstrates the
      issue. You’ll get significantly better assistance from this list if you
      can
      provide a runnable example of the problem.

    –Matt J.