COMMUNITY FORUM

Open k2 item in modal view in Tag listing

Start
Prev
1
Next
End

Goble002
Topic Author
Offline
Premium Member

5 months 2 days ago #181697 by Goble002

Open k2 item in modal view in Tag listing was created by Goble002

Hello,

if anyone could help here withe these codes :

This is what I get in item view. When you click on the image you have a modal popup with the XL image:

                <a data-k2-modal="image" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
                    <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
                </a>

I'm trying to get an item open in modal popup view when I click on the image of the item listed in tag listing. It should be opened with some basic info:
Image Title (itemTitle)
XL Image
Description (itemFullText)

This is what i have done so far in tag.php

                        <a data-k2-modal="image" href="<?php echo $item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
                            <img src="<?php echo $item->imageGeneric; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>" style="width:<?php echo $item->params->get('itemImageGeneric'); ?>px; height:auto;" />
                        </a>

However the image will not open in modal view. Anyone can help ?

Please Log in or Create an account to join the conversation.

Fábio Jordan
Offline
Senior Member
Nothing like a good coffee to make a better web

4 months 4 weeks ago #181703 by Fábio Jordan

Replied by Fábio Jordan on topic Open k2 item in modal view in Tag listing

Magnific Popup is only called on the item view, so it does not work on tag view by default.

To make it work, add this on your tag.php override (at the top of the file, right after the "defined('_JEXEC') or die('Restricted access');" line:

$document = JFactory::getDocument(); $document->addStyleSheet('https://cdn.jsdelivr.net/npm/[email protected]/dist/magnific-popup.min.css'); $document->addStyleDeclaration(' /* K2 - Magnific Popup Overrides */ .mfp-iframe-holder {padding:10px;} .mfp-iframe-holder .mfp-content {max-width:100%;width:100%;height:100%;} .mfp-iframe-scaler iframe {background:#fff;padding:10px;box-sizing:border-box;box-shadow:none;} '); $document->addScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.magnific-popup.min.js');

The rest of your code is fine.

Best luck!

Please Log in or Create an account to join the conversation.

Goble002
Topic Author
Offline
Premium Member

4 months 4 weeks ago #181705 by Goble002

Replied by Goble002 on topic Open k2 item in modal view in Tag listing

This is perfect, thank you !

Please Log in or Create an account to join the conversation.

Goble002
Topic Author
Offline
Premium Member

4 months 3 weeks ago #181706 by Goble002

Replied by Goble002 on topic Open k2 item in modal view in Tag listing

Any idea about how to insert the introtext in modal popup view ?

So introtext appears just below imageXLarge.

The code to be inserted :

<?php echo $item->introtext; ?>

Please Log in or Create an account to join the conversation.

Fábio Jordan
Offline
Senior Member
Nothing like a good coffee to make a better web

2 months 3 weeks ago #181757 by Fábio Jordan

Replied by Fábio Jordan on topic Open k2 item in modal view in Tag listing

I couldn't find an easy way to do it.

This modal is created from a js file: jquery.magnific-popup.min.js

The problem: this js file is loaded from CDN, so you can't change its parameters.

Also, there's no easy way to change the title using jquery or java, since the content of the modal is generated on click (there's a solution, but not easy and it will consume some resources).

So, I guess the only option should be download jquery.magnific-popup.min.js, point it on K2 files (which is hack, and not a good thing, since you gonna have to write it again on every update) and than change this js file as you want.

OR the best way... if you use JCE, you can download JCE Media Box and activate the plugin.

After that, you can change the link for your image as follows:

<a class="wfpopup wf-zoom-image" href="<?php echo $this->item->imageXLarge; ?>" data-mediabox-title="<?php echo $this->item->title; ?>" data-mediabox-caption="<?php echo $this->item->image_caption; ?>"

So instead of using magnific popup, it will load JCE Media Box. The result should be like this:

cafecomfilme.com.br/images/cafe/image-popup.jpg

Hope it works.

Best of luck!

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End