To see how this works, click here!
To use this snippet, paste the following code and fill in the desired fields:
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).
|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.|
Like its predecessor, the Modal Image snippet may be easily customized for your site via CSS. Use the following classes for customization:
|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):
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?
- Use the regular Bootstrap Image Box instead.
- …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!