Galleria slideshow / SCSS, JS, Macy.js

Community feedback

• 

  P

  Harm Intemann•590

  @ghintemaPosted about 2 years ago

  Hi Tereza,

  I've had a look at your solution to the galleria slideshow. I am really impressed!! :) I am trying to build it for myself. I am not sure, how to realize the slider. Should I make a real slider with Javascript? Or in this case bunch of different pages linked to each other??

  I'd like to ask you something and woud like to learn something from you. It's about this query-like url with 'painting=0' at the end. When you zapp your slides, it just increases this 'painting-parameter'. I don't know that technice and would like to learn more about it. As far as I understand it, you have only ONE page (html-file) for all the different slides and depending on this 'painting= ? ' parameter do you choose, what is beeing shown. Right? Can you give me a short explanation of how it works? Do you have a key-word for me to google this technice? Do you need a framework to do this trick?

  I highly thank you for your help!! :) Harm

  0

  ---

  

  Tereza•605

  @sirriahPosted about 2 years ago

  @ghintema Hi, I replied to you on the slack, please continue with the conversation there.

  I will post my answer for somebody, who may be interested.

  Yes, I have only one page, which listens the parameter from URL. If you open my code for detail.html, you can see that before </body>, there is a script link for detail.js - this script can read the parameter and displays the right image with this index.

  First I created the homepage. I took that JSON file, where you can find all info about images. https://github.com/sirriah/FM-galleria-slideshow-site/blob/main/data.json This is in the starter pack folder from frontend mentor. This I can load with JS and the whole gallery on the homepage is an output of the forEach cycle which took element from JSON one by one and fill the template literal with the data of this element. https://github.com/sirriah/FM-galleria-slideshow-site/blob/main/js/home.js There you can see, that there is defined the url with parameter. I store the JSON data in the sessionStorage, because it is faster to read the data from the sessionStorage.

  In the detail.js, I read the parameter from the URL and pick the right element from the sessionStorage. There is another template literal which outputs the main content for detail.html.

  This is simplified approach how the modern pages can be build. Because for example e-shop with thousands of products you cannot build a single html page for every product, it is nonsense. What if you want to make a change in the footer? You will have to open thousands of pages… I think you understand.

  I don’t know how much you understand the JS, but try to purchase some complex course. I took this https://www.discount-courses.com/courses/javascript-es6 but maybe you can find some free courses on the youtube. That one above is little bit boring, but you can find there almost everything. Happy coding.

  0