Почему фотографии должны отображаться сначала для увеличения лупы jquery?

Question

Я работаю над сайтом, на котором размещаются музыка, картинки и видео. В настоящее время у меня 4 страницы, титульная страница, музыкальная страница, страница видео и страница с изображением. Это работает хорошо, но я хотел бы иметь возможность включить возможность играть музыку и смотреть на фотографии в одно и то же время. Для этого я создал один HTML-документ с каждой прежней страницей внутри div с описательным именем класса. Затем я написал функцию javascript, которая показывает и скрывает каждый div, когда он вызывается, поэтому страница работает так, как будто это 4 страницы, но это не так. Поэтому я встроил музыкальный плеер в нижний колонтитул, который остается открытым, когда музыка играет, а это значит, что вы можете переключаться между каждым типом мультимедиа, сохраняя нижний колонтитул музыки открытым и играя. Здесь и лежит проблема. Когда это будет сделано, функция jquery увеличителя изображения, которую я использовал на моей странице изображения, больше не работает правильно, ЕСЛИ дисплей изображения не отображается в начале при открытии страницы. Только тогда вы можете переключаться между типами носителей и увеличивать изображения. Если сначала отображается имя div (как и предполагалось), и вы пытаетесь увеличить изображение, это не сработает.

Сначала я подумал, что некоторые из внешних библиотек javascript отрицательно взаимодействуют друг с другом, но потом я столкнулся с тем, что я объяснил выше, и теперь я просто в недоумении, почему изображения должны быть первыми вещи, отображаемые для того, чтобы лупа работала правильно.

Код jquery, который я использую, называется jQuery Image Magnify, и он создан Dynamic Drive.

Редактировать: способ, которым я скрываю и показывать div, имеет стиль = "display: none", чтобы скрыть и style = "display: block", чтобы показать.

Answer 1

Интересный вопрос. Вероятно, потому что элемент должен быть фактически видимым для функции jQuery Image Magnify для запуска. Я готов поспорить, что плагин использует imageElement.onload для обработчика увеличения изображения или что-то в этом роде, который, я думаю, не работает, если элемент изображения скрыт.

Что касается решения, попробуйте настроить изображение на видимое при первой загрузке страницы, возможно, с левым набором на -9999 px или что-то глупое, чтобы оно было технически «видимым», но пользователь не может видеть это. Затем, после того, как изображение загрузилось и (надеюсь) было увеличено или что бы ни делал плагин, переместите его как дочерний элемент div, на котором его страница должна быть включена и избавиться от отрицательного значения слева.