La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
This is how the current page look likeI would wish to add in more photos. An example of how I want it to look like is this, pictures at the side (sth like an image gallery) then when clicked, it appears as a large picture.
There is an existing custom module and I am trying to add in pictures to it but I'm not sure what changes need to be made to the code. I want it to look like the second picture, with an image gallery at the side and clicking on each image will open it up.
Sadly, I can not access the code, as I do not have acces to your portal. (thats a good thing tho, security!)
It looks like you want to make a slider with vertical thumbnails. If you click on a thumbnail, a new "slide" is inserted. There are plenty of ways to build one!
A quick Google search gives back a complete slider with HTML, JS and CSS to copy, with the only difference that the thumbnails are on the right: https://codepen.io/hashif/pen/xxbPLKx
Try to search for a codesandbox or jsfiddle example, that will most of the time give a complete example including code.
If you have a hard time building the examples into a working module, give me a message!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vehicle Details</title>
<!-- Font Link -->
</head>
Looking at your code I would recommend to use a repeater-function/for-loop in the module. It makes editing and handling the module much easier.
The whole code could look like this. It's a bit more advanced in development but it will help you/your page-editors/client to maintain this module.
...
<div class="SLIDER-OUTER-WRAPPER-CLASS">
{% for item in module.slider %}
<div class="SINGLE-SLIDE-CLASS">
{# start left column #}
<div class="MAIN-IMAGE-CLASS">
<a href="item.main_slide.link.href" target="_blank">{# comment: This will link the image #}
<img src="item.main_slide.image.src" alt="item.main_slide.image.alt" class="SINGLE-SLIDE-MAIN-IMAGE-CLASS">
</a>
</div>
{# end left column #}
{# start right column #}
<div class="THUMBNAIL-WRAPPER-CLASS">
{% for thumbnail in item.thumbnails %}
<div class="SINGLE-THUMBNAIL-WRAPPER-CLASS">
<img src="{{thumbnail.image.src}}" alt="{{thumbnail.image.alt}}" class="SINGLE-THUMBNAIL-CLASS">
</div>
{% endfor %}
</div>
{# end right column #}
</div>
{% endfor %}
</div>
...
You can work with the module.css part, but this can lead to performance drops. I would recommend to place the whole CSS part either in your main CSS file - or - in a seperate CSS file and link it in the right sidebar.
Same for the module.js part but it's got a bigger impact on the page speed/performance. I would recommend to put the module.js part either in your main JS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vehicle Details</title>
<!-- Font Link -->
</head>
Looking at your code I would recommend to use a repeater-function/for-loop in the module. It makes editing and handling the module much easier.
The whole code could look like this. It's a bit more advanced in development but it will help you/your page-editors/client to maintain this module.
...
<div class="SLIDER-OUTER-WRAPPER-CLASS">
{% for item in module.slider %}
<div class="SINGLE-SLIDE-CLASS">
{# start left column #}
<div class="MAIN-IMAGE-CLASS">
<a href="item.main_slide.link.href" target="_blank">{# comment: This will link the image #}
<img src="item.main_slide.image.src" alt="item.main_slide.image.alt" class="SINGLE-SLIDE-MAIN-IMAGE-CLASS">
</a>
</div>
{# end left column #}
{# start right column #}
<div class="THUMBNAIL-WRAPPER-CLASS">
{% for thumbnail in item.thumbnails %}
<div class="SINGLE-THUMBNAIL-WRAPPER-CLASS">
<img src="{{thumbnail.image.src}}" alt="{{thumbnail.image.alt}}" class="SINGLE-THUMBNAIL-CLASS">
</div>
{% endfor %}
</div>
{# end right column #}
</div>
{% endfor %}
</div>
...
You can work with the module.css part, but this can lead to performance drops. I would recommend to place the whole CSS part either in your main CSS file - or - in a seperate CSS file and link it in the right sidebar.
Same for the module.js part but it's got a bigger impact on the page speed/performance. I would recommend to put the module.js part either in your main JS file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Vehicle Details</title> <!-- Font Link -->
@YunYing , just a quick heads up, no one can see the app link you referenced above. only people who are users of that portal can see it. You will need to add your code block here 😀
Sadly, I can not access the code, as I do not have acces to your portal. (thats a good thing tho, security!)
It looks like you want to make a slider with vertical thumbnails. If you click on a thumbnail, a new "slide" is inserted. There are plenty of ways to build one!
A quick Google search gives back a complete slider with HTML, JS and CSS to copy, with the only difference that the thumbnails are on the right: https://codepen.io/hashif/pen/xxbPLKx
Try to search for a codesandbox or jsfiddle example, that will most of the time give a complete example including code.
If you have a hard time building the examples into a working module, give me a message!