Hi all,
In this code pen:
https://codepen.io/sachinchoolur/pen/Ihoev?editors=1100from where is the part in red rectangular coming. I mean from which HTML?
The JavaScript is using the data-thumb values
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop:true,
slideMargin: 0,
thumbItem: 9
});
1 Like
I got that, but html has just one div and ul so how to alter the thumbnails part and the bigger image if there be any need. I believe HTML should be coming from HTML only or what DIV/HTML is handling the bigger image?
If you want to know how it cycles the <img>s and displays the thumbs, take a look at the lightSlider code wherever that may be.
1 Like
Javascript what i understand so far is for adding interactivity for user, but lloks like it is also altering the whol HTML.
the html in the browser is:
<div class="demo">
<div class="lSSlideOuter ">
<div class="lSSlideWrapper usingCss" style="transition-duration: 400ms; transition-timing-function: ease;">
<ul id="lightSlider" class="lightSlider lsGrab lSSlide" style="width: 6300px; height: 321px; padding-bottom: 0%; transform: translate3d(-450px, 0px, 0px);">
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg" class="clone left" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg" class="lslide active" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-3.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-4.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-5.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-6.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-8.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-9.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-10.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-12.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg" class="lslide" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg">
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg" class="clone right" style="width: 450px; margin-right: 0px;">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
</li>
</ul>
<div class="lSAction"><a class="lSPrev"></a><a class="lSNext"></a></div></div>
<ul class="lSPager lSGallery" style="margin-top: 5px; transition-duration: 400ms; width: 607.167px; transform: translate3d(0px, 0px, 0px);"><li style="width:100%;width:45.55555555555556px;margin-right:5px" class="active"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg"></a></li><li style="width:100%;width:45.55555555555556px;margin-right:5px"><a href="#"><img src="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg"></a></li></ul></div>
</div>
which is different from the code pen. so javascript has this much capability of altering the HTML?
Technically, it doesn’t alter the HTML, it alters the DOM (Document Object Model).
For example, look at this page’s view-source and compare that with what you see in the browser’s Developer Tools.
The view-source is the HTML, the dev tools is the DOM.
A bit confusing I know, since they look the same syntax-wise.
2 Likes
In the view source the HTML is not visible looks like codepen has hidden it somehow.
While on the codepen page look to the bottom right corner.
Then click “Export” > Export.zip
Then you can run the files from your local machine and use the browser’s Dev Tools as Mittineague suggested.
2 Likes
In this case view source has the same HTML as the codepen, and the inspect element has different HTML(Javascript is injecting that HTML?).
I see JS wrapping anchors around the images in Dev Tools, and it sets an active class on the <li>
In page source I see images nested in the <li> without anchors, as seen in your screenshot above.
1 Like
Two extra div systems are also being injected, which are not present in view-source or html file.
HTML File:
index.html (2.8 KB)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.