These are chat archives for FreeCodeCamp/HelpJavaScript

22nd
Nov 2018
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:51
@alpox are u there?
alpox
@alpox
Nov 22 2018 19:52
@diomed Not long
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:53
could you tell me how to apply this ; https://github.com/francoischalifour/medium-zoom
to every picture in blog post
alpox
@alpox
Nov 22 2018 19:54
@diomed simple. query all pictures in your post and put them into the mediumZoom constructor
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:54
great. how to do that exactly
alpox
@alpox
Nov 22 2018 19:54
                mediumZoom(document.querySelectorAll("img"), {
                    margin: 30,
                    offset: 0,
                });
About like that :D
When (where) to put this code depends on what project you are building
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:55
ok. but won't that take every simgle picture on webpage
alpox
@alpox
Nov 22 2018 19:55
Yes it will
You should better have some specific selector which targets a certain blog post
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:55
yes, gimme example for that one
I mean it wont target blog post, but it should target blog area
I'll wrap it in a div with id
alpox
@alpox
Nov 22 2018 19:56
                mediumZoom(document.querySelectorAll(".myBlogPost img"), {
                    margin: 30,
                    offset: 0,
                });
:D
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:56
will that do it?
alpox
@alpox
Nov 22 2018 19:56
Well if the blog post has the class name myBlogPost on its wrapper element, yes
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:56
thank you, I'll try that :smiley_cat:
alpox
@alpox
Nov 22 2018 19:56
And if you have it in a div with an id as you said, just replace . with #
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:57
I know. :D
alpox
@alpox
Nov 22 2018 19:57
great :)
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:57
I dont know a lot, but I know really basic stuff :P
alpox
@alpox
Nov 22 2018 19:57
Hmm I think you can leave away the document.querySelectorAll part
I think you can just do mediumZoom("#myBlogPost img", { .... })
May Kittens Devour Your Soul
@diomed
Nov 22 2018 19:59
but I believe I need to have this '[data-zoomable]' part
I mean that's what engages image to zoom, no?
alpox
@alpox
Nov 22 2018 20:00
Nah thats just their idea of a selector
So that you can tag every image on the page you want to apply mediumzoom on with: <img src="..." data-zoomable />
May Kittens Devour Your Soul
@diomed
Nov 22 2018 20:01
that's data atribute
alpox
@alpox
Nov 22 2018 20:01
Yes
May Kittens Devour Your Soul
@diomed
Nov 22 2018 20:01
yeah, don't I need that here
alpox
@alpox
Nov 22 2018 20:01
[data-zoomable] is a selector for all elements to which the attribute data-zoomable was applied
So yeah you don't need that
May Kittens Devour Your Soul
@diomed
Nov 22 2018 20:02
oh. ok. well, thanks a lot
alpox
@alpox
Nov 22 2018 20:07
Np :)