zoom immagine

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

#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