The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> issue with a pop-up image (hyperlink) opening in a different tab
nynypou2905
post Aug 10 2022, 11:27 AM
Post #1





Group: Members
Posts: 1
Joined: 10-August 22
Member No.: 28,499



**Error in my title! I meant to say ''opening in the same tab'', not in a different tab**

Hi,

I'm new to this forum, long time lurker, first time posting! Just to add some precision, I've been using coding since I'm young, but strictly learned through forums, Google seaches and browsing. So I'm definitely not an expert blush.gif

So, I saw on another site a code for having a pop-up image.

I added that to my HTML SOURCE CODE

$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});


and in my text this :
<a class="image-link" href="https://i.imgur.com/6fwgI6Q.png" rel="nofollow">here's an example</a>

Here's a link to a screenshot of how I did it (line 57-59 and line 65) :
https://i.imgur.com/btRxOva.png

On the website I found the code, his pop-up is on the same page, with an X to close it. When I do it, it opens a page (in the same tab). I have to click the BACK button to go back on my original page... Not really convenient.

Can someone here help me understand my error? Can someone give me the proper code to do what I'm looking for?

Thank you very much !!!

This post has been edited by nynypou2905: Aug 10 2022, 11:29 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 10 2022, 05:44 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hi!

QUOTE(nynypou2905 @ Aug 10 2022, 06:27 PM) *

I added that to my HTML SOURCE CODE

$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});


That looks like jQuery code, which is a javascript library, so it needs to be in a SCRIPT element:

CODE
<script>
$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});
</script>

Still, it won't do anything by itself. My guess is your page will also need to load the jQuery library and the actual popup script. See https://learn.jquery.com/about-jquery/how-jquery-works/ and https://dimsemenov.com/plugins/magnific-popup/

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:24 PM