JJ shoutbox Image Preview

Details
Kategorie: Diverse
Veröffentlicht: Montag, 18. Mai 2020 04:33
Geschrieben von Super User
Zugriffe: 2126

add Image previews to JJshoutbox img-links (optional popover)     (type: core-hack)

requirement: of course JJshoutbox from joomjunk.co.uk

 

as I missed little previews on shout images, I edited the code with only 2 lines   a bit more using setup :)

for the less amount of images, there is no image->thumbnail / popover resizing
the popover option is only working with bootstrap available (in Joomla)

the preview works well in the history - the popover may have a lack of space

you can see a working demo on the startpage

 

this is what you have to do:

1. in the helper.php function bbcodeFilter replace the img line in $replace = array(:

'<a href="#" data-jj-image="$1" data-jj-image-alt="$2" class="jj-image-modal hasPopover" data-html="true" data-original-title="<img src=\'$1\' alt=\'$2\' />" data-content="$2" onclick="JJShoutbox.imageModalWrapper(event, this)">$2<img src="/$1" class="jj-image-inline" alt="$2" /></a>',
OR without popover: 
'<a href="#" data-jj-image="$1" data-jj-image-alt="$2" class="jj-image-modal" onclick="JJShoutbox.imageModalWrapper(event, this)">$2<img src="/$1" class="jj-image-inline" alt="$2" /></a>',

 

2. to use the popover, rebind it in the js-file on JJShoutbox.getPosts ->response.success:

jQuery('.jj-image-modal.hasPopover').popover({trigger:"hover"});

also if bootstrap is not fully enabled at the end of the jQuery(document).ready function add:

$('.jj-image-modal.hasPopover').popover({trigger:"hover"});

 

3. limit the preview img size using CSS:

.jj-image-inline{max-height:36px!important;width:auto;margin:0 5px;}

 

and disable image size limit if using the popover

.jjshoutbox .popover img{max-height:unset!important;}

 

for a nicer line flow you can add:

.jj-image-modal img{vertical-align: middle;}

 

Option

if adding to module setup then the new helper.php lines must be:
$preview = ($this->params->get('preview', 0));
$popover = ($preview) ? ($this->params->get('popover', 0)) : 0;

'<a href="#" data-jj-image="$1" data-jj-image-alt="$2" class="jj-image-modal'.($popover ? ' hasPopover" data-html="true" data-original-title="<img src=\'$1\' alt=\'$2\' />" data-content="$2"' : '"').' onclick="JJShoutbox.imageModalWrapper(event, this)">$2'.($preview ? '<img src="/$1" class="jj-image-inline" alt="$2" />' : '').'</a>',
 
and add this new fields in the setup.xlm:      (global labels, so no translation is required)
<field name="preview" type="jjradio" class="switcher" default="1" label="Image Preview" >
<option value="0">JNO</option><option value="0">JYES</option></field>
<field name="popover" type="jjradio" showon="preview:1" class="switcher" default="1" label="Preview Popover">
<option value="0">JNO</option><option value="0">JYES</option></field>


download JJshoutbox_imgprev (19kb)