Having a small issue with my image alignment. When I switch from portrait to landscape view, the image is no longer centered. The margin remains the same as in portrait view and I'm unsure how to adjust it.
I've attempted changing the margins of the images, but it still retains the initial portrait view margin settings.
Here's the Js/Jq code snippet:
function puceTransition(front) {
var wrapImg = $('.wrapImage');
var margeLeft = 0;
if(front) {
if (stateImg == "back") {
stateImg = "front";
margeLeft = $('#myImageBack').css("marginLeft").replace("px", "");
$('#frontImg').addClass('select');
$('#backImg').removeClass('select');
$('#myImageBack').animate({opacity: "0.5", marginLeft: ((imgFront + widthImg1 + myButtonRight)) + "px"}, "normal");
$('#myImageFront').animate({opacity: "1.0", marginLeft: parseInt(margeLeft) + "px"}, "normal");
$('.imgTitleBack').hide();
$('.imgTitleFront').show();
$('#imgButtonLeft').animate({opacity: "0.5"});
$('#imgButtonRight').animate({opacity: "1.0"});
}
} else {
if (stateImg == "front") {
stateImg = "back";
margeLeft = $('#myImageFront').css("marginLeft").replace("px", "");
$('#backImg').addClass('select');
$('#frontImg').removeClass('select');
$('#myImageFront').animate({opacity: "0.5", marginLeft: (((-imgFront) + (-widthImg1) + myButtonLeft)) + "px"}, "normal");
$('#myImageBack').animate({opacity: "1.0", marginLeft: parseInt(margeLeft) + "px"}, "normal");
$('.imgTitleBack').show();
$('.imgTitleFront').hide();
$('#imgButtonLeft').animate({opacity: "1.0"});
$('#imgButtonRight').animate({opacity: "0.5"});
}
}
}
And here are the corresponding CSS styles:
.myImage { display: block; position: relative; width: 450px; margin: 0 auto; }
.myImage.second { margin: -240px 0 0 670px; }
.myImageAirport { display: block; position: relative; width: 450px; margin: 0 auto; }
.myImageAirport.second { margin : -220px 0 0 670px; }