1
Я пытаюсь воспроизвести пример плагина jquery, который увеличивает изображение из миниатюры на моем рабочем столе, и проблема в том, что изображение не увеличивается от миниатюры всякий раз, когда я нажимаю на нееJQuery увеличить изображение из миниатюры в ошибке jQuery
Вот оригинальный источник Jquery демо, который увеличивает изображение из эскиза, который я пытаюсь повторить How to enlarge image from thumbnail in jQuery?
Это его рабочая демо http://jsbin.com/egevij/3/edit
проблема заключается в моем HTML .can кто-то укажите, где я ошибаюсь?
Это мой HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
<script type = "text/javascript" src ="trouble.js"></script>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
</body>
</html>
forms.css CSS
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
JQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
У вас есть скрипка или bin с этим кодом, запущенным в нем? –
@NuclearGhost Мне было сложно реализовать на скрипке раньше, но если вы посмотрите на пример здесь http://jsbin.com/egevij/3/edit, все, что я сделал, было отрезало javascript и поместило его на область, где она сказал --jquery -. Я не понимаю, почему это не сработает – donkeyboy72
Я только что скопировал и вставил ваш код отсюда в корзину, и он отлично подходит для меня ... http://jsbin.com/onimoc/1/edit –