Joomla Templates Club 406,261 posts

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#919912

I see that the magnific-popup is used in Ja Decor photogallery function.
Is it possible to open an single image, which is linked in an article-text, in the magnific-popup?

For example

<a href="test-image.jpg" class="maginfic-popup">Link-Text</a>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920176

Hi
I am not able to get your point about the Popup . Could u give me site url and screenshot with description of the work that u want to achieve on site .
So that i can check it for you .

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#920270

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920271

This reply has been marked as private.

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#920282

… the popup is still working but only with the ul, li-tags around the a href-tag.

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920294

Hi
The class is defined for the UL thumbnails . Here u can see it : http://prntscr.com/auhbgh
You need to check the classes how they defined to check them .
Beside you can simple use the modal window to show it . use modal class anywhere and it will work .Here is an example : getbootstrap.com/javascript/#modals

1 user says Thank You to Pankaj Sharma for this useful post

1. skhandel

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#920357

Hi,
yes i know that the class is for ul defined 😉 I tested the Joomla-Modal (modal class) and it works! Thanks a lot! But i have to comment out the defined modal-class in the JA Decor-Template (bootstrap.css) to show the link in the article. Did you know for what the class are used in the Decor-Template?

… found in bootstrap.css of the JA Decor-Template:

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920369

This reply has been marked as private.

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#920371

Hi,
thanks – i do it so and it works well – but not really responsive.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920664

This reply has been marked as private.

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#921386

I found a solution to get it work with the magnific-popup script 🙂

1. I added this code in ja_decor/js/script.js

   $('.imagepopup').magnificPopup({
       type: 'image',
   closeOnContentClick: true,
   mainClass: 'mfp-img-mobile',
   image: {
   verticalFit: true
   }
   });

2. In ja_decor/html/com_content/article/default.php changed the code of the if/else

   if (preg_match("/imagepopup/i", $this->item->text)) { 
   echo $this->item->text;
   }else{
   echo DecorHelper::photogallery($this->item->text);  
   }

3. Add class "imagepopup" for link in any joomla content

   <a class="imagepopup" title="Caption of the Image in the popup" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/DeLorean3.JPG/640px-DeLorean3.JPG" >
   <img src="https://upload.wikimedia.org/wikipedia/de/thumb/d/d2/DeLorean_logo.svg/250px-DeLorean_logo.svg.png" />
   </a>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#921387

Hi
Great, you solved it . Thanks for Sharing it for other users .

[skhandel Friend skhandelJoin date: February 2016Posts: 13Downloads:21Uploads:1 Thanks: 3]

#921388

I found a little bug in the photogallery – the Next and Previous Arrows are not vissible. The Bug is also in your Template-Demo: http://ja-decor.demo.joomlart.com/index.php/en/about/featured-projects/83-teen-bedroom-decor

I’ve added this in custom.css – now the Arrows are visible:

.mfp-arrow-left .mfp-a, .mfp-arrow-left::after {
    border-right: 17px solid #fff;
    margin-left: 31px;
    margin-top:-10px;
}
.mfp-arrow-right .mfp-a, .mfp-arrow-right::after {
    border-left: 17px solid #fff;
    /*margin-left: 39px;*/
    margin-left:0;
    margin-top:-10px;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#921397

Hi
They seems be hidden by default to only show the images and move next -previous with arrows .
But i am sending this to concern team for re-confirm it .
thanks for report on this issue .

[Author]

Posts