CODEWITHSUNDEEP
javascripthtmljquery
Totti
Totti

Reputation: 3

popup pictures in a Front end javascript website

I am looking for some help to solve a problem that I am having...

I am playing around with a template I found online and I am trying to use another JavaScript script on the template to change the behavior of the pictures, where once click it displays a modal popup with a picture. The script for that is called fancybox (there are many others that do the same thing as well, tried them as well, same results) However, once I apply the fancybox class to the picture tags, it ruins the sizing of the pictures and layouts.. all pictures start to overlap one another and take up the whole screen.. Moreover, I have also included the js and css links within the website, that is not the problem so do not ask about it please.. Thanks

The location where the template and scirpt can be found are: http://tympanus.net/codrops/2014/12/23/sliding-header-layout/ http://fancybox.net/

Moreover, here is the code where I apply the fancybox class tag on

<a href="img/item01.jpg" class="item, fancybox">
    <img class="item__image" src="img/item01.jpg" alt="item01"/>
    <h2 class="item__title">Magnificence</h2>
</a>

<a href="img/item02.jpg" class="item, fancybox">
    <img class="item__image" src="img/item02.jpg" alt="item02"/>
    <h2 class="item__title">Electrifying</h2>
</a>

<!-- ... -->

Any help, would greatly be appreciated. Thanks in advance..

Upvotes: 0

Views: 128

Answers (1)

dhaupin
dhaupin

Reputation: 1643

It's because you are using commas in the classes. The classes should instead look something like this:

<a href="img/item01.jpg" class="item fancybox">

You don't use commas when defining classes in HTML. Also, keep in mind that you can only use 1 ID if you ever run into that.

Upvotes: 1

Related Questions