如何檢測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是否是圖像？

回答

相關問題