如何检测href是否是图像？

我正在制作一个名为WowBox的lightbox插件。如何检测href是否是图像？

现在，如果你想使一个div弹出您使用此：

<a href="#element" rel="wowbox" title="Title">Open #element in WowBox</a>

而且使图像弹出您使用此：

<a href="image.jpg" rel="wowbox[img]" title="Caption">Open image in WowBox</a>

现在，这里是jQuery的吧：

<script type="text/javascript"> 
    // Copyright © 2011 Nathan Johnson. All Rights Reserved. 

    jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", (($(window).height() - this.height())/2) + $(window).scrollTop() + "px"); 
    this.css("left", (($(window).width() - this.width())/2) + $(window).scrollLeft() + "px"); 
    return this; 
    } 
    jQuery.fn.close = function() { 
     $(this).click(function() { 
     $('#lb-caption').slideUp(700); 
     $('#lb-title').slideUp(700); 
     $('#lightbox-container').fadeOut(600); 
     $('#lightbox-overlay').delay(100).fadeOut(600); 
     }); 
     } 
    function ImgError(source){ 
    var errorMssg = "<div style='color:red;text-align:center;'>Error: The requested image wasn\'t found.</div>"; 
    $(this).hide(); 
    $('#lb-caption').hide(); 
    $('#lb-content').html(errorMssg); 
    return true; 
} 

    $(document).ready(function() { 
    $('#lightbox-container').center(); 
    window.onresize = function(event) { 
    $('#lightbox-container').center(); 
    } 

    $(document.createElement("div")).attr("id","lightbox-holder").prependTo("body"); 
    //The HTML of WowBox will be placed right after the starting <body> tag once the page is loaded. 
    $('#lightbox-holder').html(' \ 
    <div id="lightbox-overlay"></div> \ 
    <div id="lightbox-container"> \ 
    <div id="lb-title"></div> \ 
    <div id="lightbox"> \ 
    <div id="close-lb"></div> \ 
    <div id="lb-content"></div> \ 
    </div> \ 
    <div id="lb-caption"></div> \ 
    </div>'); 
    $('a[rel="wowbox"]').click(function() { 
    var element = $(this).attr('href'); 
    var content = $(element).html(); 
    var title = $(this).attr('title'); 
    var lightboxContainer = "'#lightbox-container'"; 
    $('#lb-content').ready(function() { 
     $('#lightbox-container').center(); 
     }); 
    $('#lightbox-overlay').fadeIn(700); 
    $('#lightbox-container').center().delay(100).fadeIn(700); 
    $('#lb-caption').html(''); 
    $('#lb-content').html(content); 
    $('#lb-title').html(title).fadeIn(700); 
    return false; 
    }); 
    $('a[rel="wowbox[img]"]').click(function() { 
    var src = $(this).attr('href'); 
    var caption = $(this).attr('title'); 
    var lightboxContainer = "'#lightbox-container'"; 
    var content = "'#lb-content'"; 
    $('#lightbox-container').center(); 
    $('#lightbox-overlay').fadeIn(700); 
    $('#lightbox-container').delay(100).fadeIn(700); 
    $('#lb-title').html('').show(); 
    $('#lb-content').html('<img onload="$('+lightboxContainer+').center();" src="'+src+'" onerror="ImgError(this)" onmousedown="return false;" /><div onmousedown="return false;" id="image-cover"></div>'); 
    $('#lb-caption').html(caption).fadeIn(700); 
    return false; 
    }); 
     $('#close-lb').click(function() { 
     $('#lb-caption').slideUp(700); 
     $('#lb-title').slideUp(700); 
     $('#lightbox-container').fadeOut(600); 
     $('#lightbox-overlay').delay(100).fadeOut(600); 
     }); 
     $(document).keypress(function(event) { 
     if (event.keyCode == 27) { 
     $('#lb-caption').slideUp(700); 
     $('#lb-title').slideUp(700); 
     $('#lightbox-container').fadeOut(600); 
     $('#lightbox-overlay').delay(100).fadeOut(600); 
    } 
     }); 
    }); 
    </script>

现在我只需要一种方法来检测，如果标签的href是图像或一个div。所以我可以使用$('a[rel="wowbox"]').click()而不是使用两者。我知道这可能会包含一个if/else语句，但如果有人帮助，那会很好。谢谢！ :)

亲切的问候，弥敦道

来源

2011-07-25 Nathan

if($(this).attr('href').indexOf('.jpg') > 0) // or any other extension 
{ 
    //do what you want 
}

你也可以去周围的其他方法：

if(!$(this).attr('href').indexOf('#') >= 0) // or any other extension 
    { 
     //do what you want 
    }

来源

2011-07-25 11:25:26 kleinohad

请更换'$（本）.attr（HREF）'与短，简单，大大更有效率'this.href'。 – RobG

谢谢！我会试试这个。 – Nathan

如果图片网址中包含“＃”，该怎么办？它会继续正常工作还是会变得混乱？ – Nathan

我会说，如果该元素不存在，它必须是一个图像。

if($("image.jpg").length === 0) { 
    // it's an image (probably always the case since an 
    // 'image' element does not exist) 
} 

if($("#element").length === 0) { 
    // it's an image (not the case if there is a element 
    // with ID 'element' in the DOM) 
}

来源

2011-07-25 11:26:42 pimvdb

用途：

if(/\.(?:jpg|jpeg|gif|png)$/i.test($(this).attr('href'))){ 
    //do what you want 
}

来源

2011-07-25 11:54:37 Darm

谢谢！这看起来像会起作用。我将尝试所有这些答案。 – Nathan

你可以猜测，如果它与代表的图像格式的扩展（如JPG，JPEG，GIF等）结束，它链接到一个图像。但是你真的不知道。 URL（除了页内定位符）用于服务器解释，而不是客户端。

你很可能会更好给予链接到图像的不同类那些元素，那么你可以做（假定该代码是在监听器函数，其中这引用元素）：

var imageClass = 'imageLink'; 
var elementClass = 'elementLink'; 

if (hasClass(this, imageClass)) { 
    // it's a link to an image 
} else if (hasClass(this, elementClass)) { 
    // it's a link to an element 
} else { 
    // it really is a link 
}

一个简单的hasClass功能：

function hasClass(el, cName) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
}

来源

2011-07-25 12:35:26 RobG

谢谢，但Facebox jQuery lightbox插件以某种方式检测图像，但我无法让他们的代码与我建立我的方式一起工作。 – Nathan

如何检测href是否是图像？

回答

相关问题