- Posts: 13
COMMUNITY FORUM
Image modal problem
- Rober636
-
Topic Author
- Offline
- New Member
Less
More
4 years 8 months ago #175135
by Rober636
Image modal problem was created by Rober636
When I click on the image it doesn't open in a modal popup, it just opens in full web browser.
The Code:
<div class="catItemImage blog-item">
<div class="entry">
<span class="itemImage">
<a data-k2-modal="image" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
<img class="img-responsive" 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>
</span>
</div>
</div>
</div>
I miss something, but what?
Regards.
The Code:
<div class="catItemImage blog-item">
<div class="entry">
<span class="itemImage">
<a data-k2-modal="image" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
<img class="img-responsive" 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>
</span>
</div>
</div>
</div>
I miss something, but what?
Regards.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
Less
More
- Posts: 6218
4 years 8 months ago #175140
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Image modal problem
This is related to a JS error. Either the JS script used for the modal is cut off (Magnific Popup) or some other script breaks the entire JS code on your page. A URL would help...
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Rober636
-
- Offline
- New Member
Less
More
- Posts: 13
4 years 8 months ago - 4 years 8 months ago #175141
by Rober636
Replied by Rober636 on topic Image modal problem
URL
Regards
Regards
Last edit: 4 years 8 months ago by Rober636.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
Less
More
- Posts: 6218
4 years 8 months ago #175143
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Image modal problem
To make sure we don't load unnecessary JS code in a Joomla site, Magnific Popup is only called on the item view.
Since you copied HTML from the item view into the category view (itemlist), you have 2 options here:
- Either use some other JS modal/popup script already loaded by your template (I see PrettyPhoto loaded), in which you simply need to add some CSS class on the <a> link that has the full image path on.
- Or add the following snippet inside your category.php override, at the very top of the file, but right after the "defined('_JEXEC')..." line:
This will trigger Magnific Popup for the category view as well.
Since you copied HTML from the item view into the category view (itemlist), you have 2 options here:
- Either use some other JS modal/popup script already loaded by your template (I see PrettyPhoto loaded), in which you simply need to add some CSS class on the <a> link that has the full image path on.
- Or add the following snippet inside your category.php override, at the very top of the file, but right after the "defined('_JEXEC')..." 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');This will trigger Magnific Popup for the category view as well.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Rober636
-
- Offline
- New Member
Less
More
- Posts: 13
4 years 8 months ago - 4 years 8 months ago #175144
by Rober636
Replied by Rober636 on topic Image modal problem
SOLVED!!!!!!
Thanks!
Thanks!
Last edit: 4 years 8 months ago by Rober636.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
Less
More
- Posts: 6218
4 years 8 months ago #175145
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Image modal problem
You're welcome.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.