Image pop up effect

loukasgr

Hello Devs,
I want my images on my articles to have a pop up effect and a X button, how i can do it?

pavit

Hi loukasgr

You can use an external plugin for this, try to look HERE

Regards

pavit

Hi loukasgr

You can use an external plugin for this, try to look HERE

Regards

loukasgr

Hello pavit ,
I want this effect when someone click to see a image in my K2 items. Now i click on image and to close it i need to press back

loukasgr

Sorry but i cant find any ... what are you using on quickstart version ?
On quickstart this effect work just fine... how I can make it to work on my site too ?
I just want to have the option to close images without pressing back

saguaros

loukasgr

Hi,

It seems that the latest version of K2 v2.9.0 removed the modal so that in the K2 item detailed page, clicking on image doesn't show popup like before.

I just updated this line of code:

JHtml::_('behavior.modal');

into the file: /templates/ja_mitius/index.php for your site to make it works.

Kindly check.

loukasgr

BEST!! saguaros
Its working nice now...!! Do you know if I can apply this behavior modal to photos I add on item text?

teitbite

loukasgr Hi. Please try add this script to Your template:

<script type=“text/javascript">(function($) {$(document).ready(function() {
$('.itemFullText img').each(function(){
var vAlt = $(this).attr('alt');
var vSrc = $(this).attr('src');
$(this).before('<a class="modal" rel="{handler: 'image'}" href="'+vSrc+'" title="'+vAlt+'"><img src="'+vSrc+'" alt="'+vAlt+'"></a>'');
$(this).remove();
});
});})(jQuery)</script>

loukasgr

Hello teitbite ,
unfortunately no effect or I use it wrong ...

saguaros

loukasgr

There is no such 'custom.js' file in this template, try to put into script.js file.

loukasgr

Good day saguaros ,
Maybe i need to put any tag/code on item images ?
Images are unclickable

teitbite

loukasgr Hi. If You are copying it into existing js file than You need only this part:

(function($) {$(document).ready(function() {
$('.itemFullText img').each(function(){
var vAlt = $(this).attr('alt');
var vSrc = $(this).attr('src');
$(this).before('<a class="modal" rel="{handler: 'image'}" href="'+vSrc+'" title="'+vAlt+'"><img src="'+vSrc+'" alt="'+vAlt+'"></a>'');
$(this).remove();
});
});})(jQuery)

I've prepared it with HTML tags thinking You will put it in one of the fields for a custom scripts in template's settings.

loukasgr

Hello teitbite
Do I need to add something in K2 item to make it work?
Cause if you see a link there is images and I cant click them ...

teitbite

loukasgr Hi. No You don't. I've made a typo in code (used on ' sign too many). Please replace it with:

(function($) {$(document).ready(function() {
$('.itemFullText img').each(function(){
var vAlt = $(this).attr('alt');
var vSrc = $(this).attr('src');
$(this).before('<a class="modal" rel="{handler: 'image'}" href="'+vSrc+'" title="'+vAlt+'"><img src="'+vSrc+'" alt="'+vAlt+'"></a>');
$(this).remove();
});
});})(jQuery)

loukasgr

Hello teitbite ,
I'm confused with the whole thing, I can not see or understand what I doing wrong and there is no effect.
You told me to add the code to "/js/script.js". I have added it to the end as you will see from the photo.
But the imagesi I have in K2 item do not respond. It's like it was before I pute the code you suggest me.
I'm sorry for my mess and the whole story but I'm stuck ...

teitbite

loukasgr Hi. Actually I cannot see my script is changing. I've logged to Your site made modifications, but script is still being loaded in an old form. Do You have some cache system enabled? This needs to be removed so I will be able to proceed with changes.

loukasgr

Good day teitbite ,
No... as long as I remember I dont have any cache system on ...