I'm a beginner in jquery and html and am currently developing a gallery webpage. The functionality involves setting the selected image as the page background and then scrolling vertically based on the mouse pointer's position. This works well for images that are taller than they are wide, but I also need it to scroll horizontally if the image aspect ratio requires it.
To achieve this, I am attempting to use an if/else if statement to determine whether to set the height or width to 100% in the .css. However, the code snippet I have isn't functioning as expected:
$('<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();
The closing brackets and syntax are all correct. I've added the if statements based on code I found online, but it's not working. "fp_preview" is the part of the .css responsible for displaying the background image.
If anyone has insight on how to accomplish this, I'd greatly appreciate the assistance.
Here is the complete code and the portion of the .css I'm trying to modify:
And here's the corresponding .css:
img.fp_preview{
position:absolute;
left:0px;
top:0px;
width:0%; /* Set to 100% if image is taller than wide */
height:0%; /* Set to 100% if image is wider than tall */
}
Thank you in advance for your help. This project was inspired by a tutorial from Codrops: http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/