appfoundry/jekyll-lightbox

Simple Jekyll tag for Lightbox

jekyll-lightbox's Issues

Style sample?

Just a request: could you provide a sample CSS style, perhaps something similar to what is seen here? http://lokeshdhakar.com/projects/lightbox2/

Typo in READM.md

Nice plugin! But I noticed that you have a small typo in your README file. Your example says:

{% lightbox images/appfoundry.png --data="appfoundry_image_set" --title="The AppFoundry Logo" --alt="This is our logo" --img_style="max-width:80%;" %}

But if a user uses this example, the image style is not applied. This is because in lightbox.rb you look for --img-style instead of --img_style.

Feature Request: use context variables

I'm not an expert with Ruby, but I hacked together a change to be able to use context variables instead of giving a full image path/thumb.

module Jekyll
  class LightboxTag < Liquid::Tag

    def initialize(tag_name, text, token)
      super
<excerpt>
      if text =~ /--thumb="([^"]*)"/i
        @thumb = text.match(/--thumb="([^"]*)"/i)[1]
        # Perhaps we can check if the var is {{braced}} or not?
        # @var_thumb = false
      end
      # if text =~ /--thumb="{{([^"]*)}}"/i
      #   @thumb = text.match(/--thumb="{{([^"]*)}}"/i)[1]
      #   @var_thumb = true
      # end

    end

    def render(context)
      url = context.registers[:page]["url"]
      relative = "../" * (url.split("/").length-1)
      src = File.join(relative, @path == nil ? '' : @path);
      thumbSrc = File.join(relative, @thumb == nil ? '' : @thumb);

      # If they're context variable names, prefer them
      # TODO probably want to use {{braces}} to identify instead
      src = context[@path] || @path
      # if @var_thumb ?
      thumbSrc = context[@thumb] || @thumb
      # else...

      %{<a href="#{src}" data-lightbox="#{@data}" data-title="#{@title}"><img src="#{thumbSrc}" alt="#{@alt || @title}" class="#{@class}" style="#{@img_style}"/></a>}
    end
  end
end

Liquid::Template.register_tag('lightbox', Jekyll::LightboxTag)

I think the basic idea is there, just not a very good implementation.

Demo available?

Hi, is there any demo available?

Plugin doesn't work with Lightbox2 if `--data` parameter is empty or missing

Issue

Leaving out the --data="..." parameter or leaving it empty is not supported by Lightbox2. Currently, there is no default value and image links produced by the lightbox plugin will not be picked up by Lightbox2.

See Initialize with HTML on the [https://lokeshdhakar.com/projects/lightbox2/](Lightbox2 documentation).

Expected behavior

There is a data-lightbox attribute on the image links produced by {% lightbox ... %} even if the --data parameter is empty or missing and the Lightbox2 modal will work.

Actual behavior

There is no or an empty data-lightbox attribute on the image links produced by {% lightbox ... %} if not provided explicitely via the --data parameter and the Lightbox2 modal won't work.

Suggested fix

The lightbox plugin should set default value for the data-lightbox attribute so that Lightbox2 will pick up on the image link.
E.g. in the render method, default the data-lightbox attribute value to @path (which should always be there).

     # Check if data is given and otherwise set to default
      data = @data.to_s.empty? ? @path : @data

      %{<a href="#{src}" data-lightbox="#{data}" data-title="#{@title}"><img src="#{thumbSrc}" alt="#{@alt || @title}" class="#{@class}" style="#{@img_style}"/></a>}