Я новичок в jquery и html в целом и работаю над созданием веб-страницы галереи.Эта веб-страница работает, устанавливая выбранное изображение в качестве фона страницы, а затем прокручивая его вдоль изображения по вертикали, основываясь на вертикальном положении указателя мыши.Это прекрасно работает для изображений, которые выше, чем они широки, но многие мои изображения шире, чем все они, поэтому мне также нужно, чтобы он работал по-другому и прокручивал слева направо, если этого требует соотношение сторон.
Я пытаюсь использовать оператор if, else if, чтобы определить, должен ли я установить высоту или ширину на 100% в .css.Вот фрагмент кода, который я пытаюсь использовать, он не работает:
$('<img class="fp_preview"/>').load(function() {
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
if (newimg.width() > newimage.height()) {
jQuery('#fp_preview').css({
height: "100%",
width: ""
});
}
else if (newimg.height() > newimage.width()) {
jQuery('#fp_preview').css({
height: "",
width: "100%"
});
}
$newimg.insertBefore($currImage);
$loader.hide();
Есть закрывающие скобки и такие после этого, это не проблема.Я добавил операторы if, используя код, который нашел на этом сайте, чтобы достичь желаемого результата.fp_preview - это часть .css, которая отображает фоновое изображение.
Если кто-нибудь знает, как это сделать, я был бы очень признателен за помощь.
Вот полный код и часть .cssЯ пытаюсь изменить:
<script type = "text/javascript" >
$(function() {
//current thumb's index being viewed
var current = -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader = $('#fp_loading');
var $btn_next = $('#fp_next');
var $btn_prev = $('#fp_prev');
var $thumbScroller = $('#thumbScroller');
//total number of thumbs
var nmb_thumbs = $thumbScroller.find('.content').length;
//preload thumbs
var cnt_thumbs = 0;
for (var i = 0; i < nmb_thumbs; ++i) {
var $thumb = $thumbScroller.find('.content:nth-child(' + parseInt(i + 1) + ')');
$('<img/>').load(function() {
++cnt_thumbs;
if (cnt_thumbs == nmb_thumbs)
//display the thumbs on the bottom of the page
showThumbs(2000);
}).attr('src', $thumb.find('img').attr('src'));
}
//make the document scrollable
//when the the mouse is moved up/down
//the user will be able to see the full image
makeScrollable();
//clicking on a thumb...
$thumbScroller.find('.content').bind('click', function(e) {
var $content = $(this);
var $elem = $content.find('img');
//keep track of the current clicked thumb
//it will be used for the navigation arrows
current = $content.index() + 1;
//get the positions of the clicked thumb
var pos_left = $elem.offset().left;
var pos_top = $elem.offset().top;
//clone the thumb and place
//the clone on the top of it
var $clone = $elem.clone().addClass('clone').css({
'position': 'fixed',
'left': pos_left + 'px',
'top': pos_top + 'px'
}).insertAfter($('BODY'));
var windowW = $(window).width();
var windowH = $(window).height();
//animate the clone to the center of the page
$clone.stop().animate({
'left': windowW / 2 + 'px',
'top': windowH / 2 + 'px',
'margin-left': -$clone.width() / 2 - 5 + 'px',
'margin-top': -$clone.height() / 2 - 5 + 'px'
}, 500, function() {
var $theClone = $(this);
var ratio = $clone.width() / 120;
var final_w = 400 * ratio;
$loader.show();
//expand the clone when large image is loaded
$('<img class="fp_preview"/>').load(function() {
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
if (newimg.width() > newimage.height()) {
jQuery('#fp_preview').css({
height: "100%",
width: ""
});
}
else if (newimg.height() > newimage.width()) {
jQuery('#fp_preview').css({
height: "",
width: "100%"
});
}
$newimg.insertBefore($currImage);
$loader.hide();
//expand clone
$theClone.animate({
'opacity': 0,
'top': windowH / 2 + 'px',
'left': windowW / 2 + 'px',
'margin-top': '-200px',
'margin-left': -final_w / 2 + 'px',
'width': final_w + 'px',
'height': '400px'
}, 1000, function() {
$(this).remove();
});
//now we have two large images on the page
//fadeOut the old one so that the new one gets shown
$currImage.fadeOut(2000, function() {
$(this).remove();
});
//show the navigation arrows
showNav();
}).attr('src', $elem.attr('alt'));
});
//hide the thumbs container
hideThumbs();
e.preventDefault();
});
//clicking on the "show thumbs"
//displays the thumbs container and hides
//the navigation arrows
$btn_thumbs.bind('click', function() {
showThumbs(500);
hideNav();
});
function hideThumbs() {
$('#outer_container').stop().animate({
'bottom': '-160px'
}, 500);
showThumbsBtn();
}
function showThumbs(speed) {
$('#outer_container').stop().animate({
'bottom': '0px'
}, speed);
hideThumbsBtn();
}
function hideThumbsBtn() {
$btn_thumbs.stop().animate({
'bottom': '-50px'
}, 500);
}
function showThumbsBtn() {
$btn_thumbs.stop().animate({
'bottom': '0px'
}, 500);
}
function hideNav() {
$btn_next.stop().animate({
'right': '-50px'
}, 500);
$btn_prev.stop().animate({
'left': '-50px'
}, 500);
}
function showNav() {
$btn_next.stop().animate({
'right': '0px'
}, 500);
$btn_prev.stop().animate({
'left': '0px'
}, 500);
}
//events for navigating through the set of images
$btn_next.bind('click', showNext);
$btn_prev.bind('click', showPrev);
//the aim is to load the new image,
//place it before the old one and fadeOut the old one
//we use the current variable to keep track which
//image comes next / before
function showNext() {
++current;
var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
if ($e_next.length == 0) {
current = 1;
$e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function() {
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000, function() {
$(this).remove();
});
}).attr('src', $e_next.find('img').attr('alt'));
}
function showPrev() {
--current;
var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
if ($e_next.length == 0) {
current = nmb_thumbs;
$e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function() {
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000, function() {
$(this).remove();
});
}).attr('src', $e_next.find('img').attr('alt'));
}
function makeScrollable() {
$(document).bind('mousemove', function(e) {
var top = (e.pageY - $(document).scrollTop() / 2);
$(document).scrollTop(top);
});
}
});
< /script>
И .css
img.fp_preview{
position:absolute;
left:0px;
top:0px;
width:0%; /*if the image is taller than it is wide, make this 100%*/
height:0%; /*if the image is wider than it is tall, make this 100%*/
}
Заранее спасибо.Кроме того, это основано на этом уроке codrops: http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/