I am working on a site that hosts music, pictures and videos. I currently have 4 pages, a cover page, a music page, a video page, and an image page. This works well, but I would like to be able to enable the ability to play music and look at photos at the same time. To do this, I created one HTML document with each previous page inside a div with a descriptive class name. Then I wrote a javascript function that shows and hides each div when it is called, so the page acts like 4 pages, but it is not. So I embedded the music player in the footer, which remains open when the music is playing, which means that you can switch between each type of media while keeping the music footer open and playing. This is where the problem lies.When this is done, the image enlargement jquery function that I used on my image page no longer works correctly IF the image display does not appear at the beginning when the page is opened. Only then can you switch between media types and enlarge images. If the div name is displayed first (as expected) and you are trying to enlarge the image, it does not work.
At first I thought that some of the external javascript libraries interact negatively with each other, but then I came across what I explained above, and now I'm just at a loss why images should be the first things for the magnifier to work properly.
The jquery code I use is called jQuery Image Magnify, and it was created by Dynamic Drive.
Edit: the way I hide and show the div is style = "display: none" to hide and style = "display: block" to show.
source
share