Need SIMPLE Lightbox for Dummies

Hey Richard,

Take a look at this - http://dbrekalo.github.io/simpleLightbox/ -  it's simple, has examples and can show text ;)

The trouble with these things, they NEVER tell you how to install. This was the html in a demo:

<h3 class="attireTitleType3">Custom content</h3>

<p class="attireTextType2">
    There are times when you need to show some other type of content in lightbox beside images.
    SimpleLightbox can be used to display forms, teasers or any custom html content.
    <a class="customContentLink" role="button">Clicking here</a> will display the text above in lightbox form.
</p>

<style>

    .contentInPopup {
        padding: 2em; max-width: 40em;
    }

</style>

<script>

    $('.customContentLink').on('click', function() {
        $.SimpleLightbox.open({
            content: '<div class="contentInPopup">' +
                        '<h3 class="attireTitleType3">Custom content</h3>' +
                        '<p class="attireTextType2">' +
                            'There are times when you need to show some other type of content in lightbox beside images.' +
                            'SimpleLightbox can be used to display forms, teasers or any custom html content.' +
                        '</p>' +
                     '</div>',
            elementClass: 'slbContentEl'
        });
    });

</script>

<pre class="attireCodeHighlight"><code class="language-javascript">
    $.SimpleLightbox.open({
        content: '&lt;div class="contentInPopup"&gt;&lt;h3 class="attireTitleType3"&gtCustom content&lt;/h3&gt...',
        elementClass: 'slbContentEl'
    });
</code></pre>

Select allOpen in new window

So I took that html file & copied it to my server and ran it in firefox. It produces what is in the attachment custom_content.jpg. Of course, no lightbox.

Then I found two css files & two js files (see other file attached). Seemed they would be needed, so I uploaded them to my server & ran the html again. Same thing.

I can't understand github (never have) so it's probably all simple but I don't know the rules.

Thanks,

Richard
custom_content.JPG
files.JPG

OK, great, I'll try cloning yours.

Richard

That's perfect. Because of how it is set up, I want to click on text that is <a href="#">(some text)</a>

I think I can put an onClick in the html or do I just need to give the <a href an id, then I can copy most of your code per se except for the actual message in the lightbox.

Hey Richard,

You could use an onClick on the <a> tag if you like, but it's more common these days (and considered best-practice) to go what they call the 'unobtrusive' route - that is ... add an identifier (class or ID) to your tag and then bind to it in a script (such as the click event of jQuery)

Chris,

The lightbox works perfect, but I want to change the font-family & font-size in the text in the lightbox.

I tried this:

        <style type="text/css">
            .contentInPopup { padding: 2em; max-width: 40em; font-size:16px;}
        </style>

Select allOpen in new window

It seems to have no effect. Where does class attireTextType2 come from? It is not in the css.

Thanks,

Richard

Hey Richard,

The attireTextType2 class was just used in their example, so the style for it would be specific to their own stylesheet. It's just basic HTML so you would style it just like any other html, using whatever classes you want.

The reason why setting the font-size to 16px may appear to do nothing is because 16px is the normal default size of your browser.

<div class="contentInPopup">
    <h3>Custom content</h3>
    <p>There are times when you need to show some other type of content in lightbox beside images.
    SimpleLightbox can be used to display forms, teasers or any custom html content.</p>
</div>

.contentInPopup { padding: 2em; max-width: 40em; }
.contentInPopup h3 { color: red; font-weight:bold; font-size: 1.5em; }
.contentInPopup p { font-size: 1.3em; }

Select allOpen in new window