adding descriptions to images displayed in bluimp image gallery

[fugee ohu]

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

[Colin Law]

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

[fugee ohu]

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?

[fugee ohu]

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

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

[fugee ohu]

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

 
 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));
            }
        }
    }
);

[Walter Lee Davis]

> On Feb 28, 2016, at 12:36 PM, fugee ohu <fuge...@gmail.com> wrote:
>
>
>
> On Sunday, February 28, 2016 at 8:51:51 AM UTC-5, Colin Law wrote:
> On 28 February 2016 at 11:44, fugee ohu <fuge...@gmail.com> 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
>
> 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'),

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

>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> 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.

[fugee ohu]

hi, thanks, i dunno what you mean by an empty html element with the classname description, i think you mean <div class="description"> but that's not my view Here's my view:
 

<div id="links">
 <table>
 <% @profile.pictures.in_groups_of(5, false) do |row_tasks| %>
  <tr>
   <% for task in row_tasks do %>
    <td><a href= "<%= task.name %>" data-description = "<%= task.comment %>" data-gallery ><%= image_tag(task.name.thumb) %></a></td>
   <% end %>
  <% end %>
  </tr>
 </table>
</div>

[Walter Lee Davis]

> On Feb 28, 2016, at 7:24 PM, fugee ohu <fuge...@gmail.com> wrote:
>
>
>
[snip]

> > 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'),
>
> 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
>
>

> hi, thanks, i dunno what you mean by an empty html element with the classname description, i think you mean <div class="description"> but that's not my view Here's my view:
>
> <div id="links">
> <table>
> <% @profile.pictures.in_groups_of(5, false) do |row_tasks| %>
> <tr>
> <% for task in row_tasks do %>
> <td><a href= "<%= task.name %>" data-description = "<%= task.comment %>" data-gallery ><%= image_tag(task.name.thumb) %></a></td>
> <% end %>
> <% end %>
> </tr>
> </table>
> </div>

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

>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/ed810211-4222-4a87-978f-bf9942b78193%40googlegroups.com.

[fugee ohu]

No, there isn't The docs are at https://github.com/blueimp/Gallery/blob/master/README.md#setup and the relevant section is headed Additional Gallery Elements about 3/4 of the way down ~ fugee

[Walter Lee Davis]

> No, there isn't The docs are at https://github.com/blueimp/Gallery/blob/master/README.md#setup 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.

https://github.com/blueimp/Gallery/blob/master/README.md#additional-gallery-elements

Walter

>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/ba8a9e19-aead-47d7-b7d1-0e516a6db7dc%40googlegroups.com.

[fugee ohu]

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

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <p class="description"></p>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    </div>

[fugee ohu]

I still haven't gotten this working

[Matt Jones]

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 Jones