Плагин Jquery MultiZoom не работает должным образом

Question

Плагин Jquery MultiZoom не работает должным образом

0

Я пытаюсь увеличить изображение. Я загрузил 4 изображения. В одном главном div я сделал 1 большое изображение. После этого я сделал снимки большого пальца. Когда я нажимаю на изображение большого пальца, изображение открывается отдельно, как показано ниже:

Я хочу открыть изображение в главном изображении div:

Почему изображение открывается таким образом, что я не знаю. Я хочу открыть изображение в главном div большого изображения.

Код Основное изображение:

    <div id="productmainimage" class="targetarea">
<a href="#"> 
<img id="mainimg" name="mainimg" alt="No Image Available" src="http://localhost:8080/B2B_Solution/product_images/Tulips1760331818.jpg" height="330px" width="290px" style="border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; visibility: visible; opacity: 1; width: 290px; height: 330px;"> 
</a>
    </div>

Thumb Image Div:

<div id="mainimg thumbs" style="margin-left: 25px;">
<a href="product_images/Tulips1760331818.jpg" data-dims="290, 330">
<img src="product_images/Tulips1760331818.jpg" height="45" width="55">
</a>
<a href="product_images/MvcCaptchaGoogle1450547827.jpg" data-dims="290, 330" data-large="product_images/MvcCaptchaGoogle1450547827.jpg" data-title="L32840">
<img src="product_images/MvcCaptchaGoogle1450547827.jpg" height="45" width="55">
</a>
<a href="product_images/nokia-lumia-800n1558615039.jpg" data-dims="290, 330" data-large="product_images/nokia-lumia-800n1558615039.jpg" data-title="L32840">
<img src="product_images/nokia-lumia-800n1558615039.jpg" height="45" width="55">
</a>
<a href="product_images/lumia-music866211759.jpg" data-dims="290, 330" data-large="product_images/lumia-music866211759.jpg" data-title="L32840">
<img src="product_images/lumia-music866211759.jpg" height="45" width="55">
</a>            
</div>

jQuery:

jQuery(document).ready(function($){

                $('#mainimg').addimagezoom({ // single image zoom
                    zoomrange: [1, 2],
                    magnifiersize: [290,330],
                    magnifierpos: 'right',
                    cursorshade: true,
                });             
            })

Я использовал multizoom.js

Java Curious ღ 29 нояб. 2013, в 07:59

Источник

Теги:

jquery

image

zoom

1 ответ

Ещё вопросы

Indranil.Bharambe · Accepted Answer · 2013-11-29T04-04-00.000Z

попробуйте следующий код

<script type="text/javascript">


jQuery(document).ready(function($){


$('#image1').addimagezoom({ // single image zoom
    zoomrange: [3, 10],
    magnifiersize: [300,300],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: 'hayden.jpg'
})

})



</script>

больше вариантов:

descArea: '#description', // description selector (optional - but required if descriptions are used)
descpos: true, // if set to true - description position follows image position at a set 

distance, defaults to false (optional)

imagevertcenter: true, // zoomable image centers vertically in its container (optional)

magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional)

zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true,
disablewheel: true

-Я тоже этим пользовался, но он не работает. Когда я нажимаю на изменение изображения, но при наведении курсора на основное изображение, оно увеличивает исходное первое изображение. Я думаю, что проблема в любом <div> или <a> или в <img>
Я хочу изменить значение largezoom: на изображение большого пальца нажмите, но я не знаю, как это сделать .. Любое предложение ??
просто попробуйте проверить jacklmoore.com/zoom, пока я не попытаюсь измениться на моей стороне
У меня есть этот код, но я хочу отобразить изображения большого пальца под основным изображением, и когда я нажимаю на изображение большого пальца, оно должно изменить основное изображение, а также правильно увеличить масштаб большого пальца, но это не работает.
перейдите по этой ссылке .. это согласно вашему требованию с загрузки elevateweb.co.uk/image-zoom
Да, я скачал этот пример, но если это возможно, пожалуйста, помогите мне решить этот, потому что в загруженном мной примере, который сказал мне, что на html-странице также нет изображения большого пальца, он указан в папке, но и код для изменить изображение и увеличить его. он показывает только одно изображение и увеличивает его.