Modal Image

By Timothy FosterTimothy Foster

Description

This is a variation of the Bootstrap Image Box which transposes images into a Bootstrap modal upon being clicked.

To see how this works, click here!

Instructions

To use this snippet, paste the following code and fill in the desired fields:

[[include :snippets:modal-image
|name=
|image=
|heading=
|caption=
|link=
|title=
|alt=
|max-width=
|width=
|float=
|force-float=
|kind=
|size=
]]

If you leave a field blank, then a default value will be applied instead. The below table shows you the possible values and what each field does:

NOTE: Do not use quotes when filling out fields (unless you want quotes to display).

Attribute Default Value Description
name Required! A UNIQUE name for the image that does not contain any spaces.
image Required! The URL of the image to be displayed.
heading Hidden The title of the image, displayed over the image.
caption Hidden Description of the image or its context, displayed under the image.
link The Image URL Web location that the user is directed to when the image is clicked. When supplied with a value of none, the link will be deactivated.
title Hidden Text that appears when the user hovers over the image long enough.
alt Image Unavailable Text that appears when the image at the specified URL does not exist.
max-width auto The maximum width the image should be. Scales when the screen width becomes small enough.
width auto Forces the image to always be at this width.
float middle Aligns the image to either the left or right.
force-float false When true, the image will always float regardless of screen size.
kind default Can be one of the Bootstrap predefined color schemes: primary, warning, danger, info, or success. Changes the scheme of the image box to that specified.
size md Can either be lg, md, or sm. This adjusts the width of the modal, where lg is large, md is medium, and sm is small.

CSS Customization

Like its predecessor, the Modal Image snippet may be easily customized for your site via CSS. Use the following classes for customization:

Class Description
image-box The overall Image Box
image-box-modal The modal box that appears when the image is clicked
image-box-heading The heading area above the image
image-box-image The image area where the image itself resides
image-box-caption The caption area below the image

You may also use the following Bootstrap-specific classes that correspond to the kind field (see above):

Class
image-box-warning
image-box-danger
image-box-info
image-box-success

How do I…

  • …disable the link on the modal so the user cannot get to the image itself?
    • Give the link field the value none, and the link will be deactivated.
  • …disable the link so the modal does not appear?
  • …make the image respond to the device?
    • This is done automatically unless you gave a value to the width field. To maintain screen responsiveness, we recommend you use max-width instead.
  • …make it so the image box is not bigger than the image?
    • Supply a value to the max-width field.
  • …allow the user to navigate through a gallery of images?
    • This is not the tool you want to use. Instead, we recommend looking at the Carousel snippet.
  • …it doesn't work!
    • Your site probably does not have Bootstrap enabled. Read more about this here.
  • …so uh, your image thing is hideous.
    • If you do not like how it looks, you can define your own CSS using the CSS classes stated above in the "CSS Customization" section.
  • …your snippet doesn't do what I want.
    • Unfortunately, I cannot cater to everyone's needs. If you wish, you can copy the source code directly and hence have total power over its operation.

Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Timothy Foster

Carousel - 24 May 2015 01:18
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45
Fancy <hr> Dividers - 15 Feb 2012 00:51


Rate this solution

If you think this solution is useful — rate it up!

rating: +3+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License