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
});
}
}
