See the Pen fB圎H by Samiullah Khan ( on CodePen.6143įirst of all Let’s trigger a click event whenever images inside thumb div is Clicked $('.thumbs'). Adding interaction to our Image GalleryĬurrently we have following status of image gallery. For this purpose we will need a little Javascript.īut don’t worry too much about Javascript we will be using jquery for the most part, as its usage is familiar and easier to make DOM selections. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. So now when ever we click on the thumbnail image, it’s full version has to be shown on the right column. img new SimpleImage('IMAGE NAME') Opens the image stored in the file 'IMAGE NAME' into the variable img A SimpleImage is a 'type' of data (we've already seen doubles, integers, and text) SimpleImage collects all the pixels together in one variable and has functions that allow programmers to edit the image print(img) Outputs (displays) the. HTML preprocessors can make writing HTML more powerful or convenient. In part 1 we have created image gallery and in this post we will bring it to the end by adding interactivity.
0 Comments
Leave a Reply. |