Skip to content

Instantly share code, notes, and snippets.

@mohsinrasool
Created February 18, 2016 14:10
Show Gist options
  • Save mohsinrasool/dcb360887c712af5033a to your computer and use it in GitHub Desktop.
Save mohsinrasool/dcb360887c712af5033a to your computer and use it in GitHub Desktop.
JQuery hover effect to replace and preload hover images.
jQuery(document).ready(function($) {
$('.people img').click(function() {
$('.person_details').slideUp('slow',function(){
$(this).remove();
});
$('.people img.clicked').each(function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg);
$(this).removeClass('clicked');
});
$(this).addClass('clicked');
var normalImg = NormalImgOf($(this).attr("src"));
if(normalImg == $(this).attr("src"))
$(this).attr("src",HoverImgOf(normalImg));
var details = $(this).parents('.people').siblings('.details').html();
$(this).parents('.et_pb_row_inner').after('<div class="person_details" style="display:none">'+details+'</div>');
$('.person_details').slideDown('slow');
});
$(".people img").hover( function() {
if(!$(this).hasClass('clicked')){
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg);
}
}, function() {
if(!$(this).hasClass('clicked')){
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg);
}
});
/* preload hover images */
jQuery(".people img").each(function(){
preload(HoverImgOf($(this).attr("src")));
});
});
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1-Hover.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)-Hover\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment