This is my first attempt with Mootools, so I welcome a critique of the code.
I have a dynamic list of images that expand on the 'click" event and contract on the '
mouseout' event. The code works fine in all browsers (FF, Safari, Chrome, even the smartphones) but not in IE9 (JS is enabled)
Anyone with similar problem or solution?
I plan to use a lightbox effect, downloading a larger & clearer image to the center of the page, instead of just resizing a small image. However, I am hesitant to attempt this, if there is problems with IE9.
I have coded three image sizes with the upload commit, so the larger image is available for the lightbox, but, I don't see anything in mootools for a lightbox, or am I missing it?
$i = 0;
while($i < count($validate)) {
<div class="validate">
<div class="validate_image_<?php echo $validate[$i]['validate_type']; ?>">
<div class="validate_image" id="validate_image_wrapper_<?php echo $i; ?>">
<?php
if ($validate[$i]['validate_image_filename'] != '') {
if (file_exists(UPLOAD_DIR . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']))) {
echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']) . '" alt="Listing Image" />';
} else {
echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_large.', $validate[$i]['validate_image_filename']) . '" alt="Listing image" />';
}
} else {
?>
<img src="/images/no_image_posted_validate.png" alt="no image posted" />
<?php
}
?>
</div>
... remainder of HTML display code
function setupEnlargeImage() {
window.myFx = new Fx({
duration: 200,
transition: Fx.Transitions.Sine.easeOut
});
$$('.validate_image').addEvent('click', function() {
window.selectedImage = this.id;
myFx.start(1,2.0);
});
$$('.validate_image').addEvent('
mouseout', function() {
window.selectedImage = this.id;
myFx.start(1.0,1);
});
myFx.set = function(value) {
var style = "scale(" + (value) + ")";
$(window.selectedImage).setStyles({
"-webkit-transform": style,
"-moz-transform": style,
"-o-transform": style,
"-ms-transform": style,
transform: style
});
}
}
