zoom immagine

uli · 2021-09-03 18:31:00

OK, thank you, I can now try to analyse.

John-Paul F · 2021-09-03 18:32:16

Thank you uli.
I’m extremely grateful for your time and attention.

uli · 2021-09-03 18:36:44

John-Paul, you gave me maybe 3 minutes, before you changed that class back again. I’m out now, sorry.

John-Paul F · 2021-09-03 18:58:05

uli wrote #331518:

John-Paul, you gave me maybe 3 minutes, before you changed that class back again. I’m out now, sorry.

Uli I sincerely apologise, and completely understand.

I thought it had “not worked”, so I changed it back. Shows how little I know what I’m doing.

I’ll keep investigating. Thank you for the help you gave.

I think I’m a little closer than before…

Bloke · 2021-09-03 21:39:05

Seems as if your page is now set up okay but, if I’ve read the documentation correctly then you need to alter the way you kick off the script if you’re using it in ‘parent mode’ (option 2). Try using this construct instead:

$('.popup').magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery: { 
    enabled: true 
  }
});

John-Paul F · 2021-09-04 00:04:32

Bloke wrote #331520:

Seems as if your page is now set up okay but, if I’ve read the documentation correctly then you need to alter the way you kick off the script if you’re using it in ‘parent mode’ (option 2). Try using this construct instead:

$('.popup').magnificPopup({...

Thank you Bloke. I’m really struggling to understand where I’m supposed to put this. I guess it goes into the “head” form…?

<!-- JPF trying to work out where to put this - Magnific Popup CSS -->
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="<txp:site_url />assets/css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="<txp:site_url />assets/js/jquery.magnific-popup.js"></script>

<script>
$('.popup').magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery: { 
    enabled: true 
  }
});


</script>

Anyway, that’s where I’ve put it for now. But I’m still getting the same effect on the page: click on an image and I go to its URL without any kind of clickthrough to other images.

Can anybody recommend a really simple place for me to learn about scripts/JS stuff? I look at the Magnific documentation and I’m not at all clear what the difference is between the bits of HTML that seem familiar, eg:

<a href="path-to-file.html" class="ajax-popup-link">Show inline popup</a>

and the code that looks very strange to me, often starting with dollar signs and a variety of brackets on different lines (why??), such as this:

$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});

I’m ok on HTML and on Textile markup but this is totally baffling.

Thank you again.

Bloke · 2021-09-04 01:26:32

Oh wait, duh, sorry. The script needs to go inside a ‘domready’ block. Without that, it runs before the content has been loaded on the page, so doesn’t know where to attach itself.

There are a few ways to do this but the most robust is to wrap the JavaScript in this:

$(function() {
   // script here.
});

So in your case:

$(function() {
  $('.popup').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: { 
      enabled: true 
    }
  });
});

Another approach would be to move the <script>...</script> block to the bottom of your HTML, just before the closing </body> tag. That means your code isn’t executed until after the page has loaded so all the elements are there. Then, when the JavaScript runs and wants to hook into anything on the page with class="popup" (which is what the $('.popup') does) it already exists on the page.

In your case, with your script currently in the <head> section, it was loading and running before the <div class="popup"> existed. So it just scratched its head, shrugged and gave up. You can take either approach, but wrapping it in the ‘domready’ block means you can put your script tag anywhere on the page and it’ll only run when the browser says all the page elements are in place.

Regarding understanding JavaScript – or in this case jQuery which is a convenient wrapper around JavaScript (that’s becoming less and less relevant now that the JavaScript language is maturing) – there are many primers dotted around the web.

Briefly, most times jQuery – and indeed JavaScript itself – follows the:

1) Find something on the page
2) Do something with it

process.

The $('something') construct is jQuery notation that tells JavaScript to “go and look for the element called ‘something’ in the HTML”. If you precede ‘something’ with a dot, it goes and looks for all elements that have that class name. So in your case:

$('.popup')

Says go and find all elements with class="popup". It dutifully finds your div. There’s only one on the page. If there was more than one it would operate on all of them in turn.

Then you chain stuff on the end of that to perform an operation on the thing you just found. In this case, it calls the magnificPopup() function (which was loaded by an earlier <script> tag).

Inside that function call – within its parentheses – you’re customising how it loads by supplying comma-separated name: value pairs of things. And any time you want the value to be anything more complex than ‘a string’ you wrap it in curly braces. So…

delegate: 'a' is fine, the value is a string.

type: 'image' is fine, it’s a string.

gallery: contains something that’s not a string (another name-value pair called ‘enabled’) so it needs wrapping in braces:

gallery: { 
    enabled: true 
}

FInally, because the entire set of name-value pairs used to configure the magnificPopup() function is more than ‘just a string’, the entire set needs to be wrapped in braces. That’s why the construct is:

$('.popup').magnificPopup(
{
   name: value,
   name: value,
   name: value,
   ...
}
);

It’s just that, to save space, the braces are often put on the same line as the opening/closing parentheses of the function.:

$('.popup').magnificPopup({
   name: value,
   name: value,
   name: value,
   ...
});

Hope that helps demystify things a bit.

Last edited by Bloke (2021-09-04 01:30:51)

John-Paul F · 2021-09-04 09:51:36

Bloke wrote #331522:

Oh wait, duh, sorry… Hope that helps demystify things a bit.

It really does, thank you so much for your patient explanation.

I know now what to call the stuff I need to learn from those dotted-around-the-internet primers.

For what it’s worth, I’m starting with W3schools.com

Last edited by John-Paul F (2021-09-04 09:58:52)

Textpattern CMS

Textpattern CMS support forum

#31 2021-09-03 18:31:00

Re: zoom immagine

#32 2021-09-03 18:32:16

Re: zoom immagine

#33 2021-09-03 18:36:44

Re: zoom immagine

#34 2021-09-03 18:58:05

Re: zoom immagine

uli wrote #331518:

#35 2021-09-03 21:39:05

Re: zoom immagine

#36 2021-09-04 00:04:32

Re: zoom immagine

Bloke wrote #331520:

#37 2021-09-04 01:26:32

Re: zoom immagine

#38 2021-09-04 09:51:36

Re: zoom immagine

Bloke wrote #331522:

Board footer