Search code examples
jquerycolorbox

How to change jQuery code to hide .jpg at the end of the url?


Could someone help me with this short piece of code? Right now when I click thumbnail image on my site it creates url in the address bar. But url has .jpg at the end. How should I modify the code so that it won't show .jpg at the end of the url?

This piece of code also opens Colorbox image automatically if user enters site with url like www.domain.com/#image.jpg so naturally the change to the code should affect also to that.

Thanks!

jQuery(function() {
    var id, group;

    group = jQuery("a[rel='lightbox[63]']").colorbox({ 
        onComplete: function() {
            window.location.hash = (this.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1];
        }, 
        onClosed: function() {
            location.hash = '';
        }
    });

    id = location.hash.replace(/^\#/, '');
    group.filter('[href$="'+id+'"]').eq(0).click();
});

Solution

  • Replace this:

    window.location.hash = (this.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1];
    

    With this:

    // Get the image URL
    with_ext = (this.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1];
    // Get the image url without the extension
    without_ext =   with_ext.substring(0, with_ext.lastIndexOf(".")));
    // Redirect
    window.location.hash = without_ext;
    

    Explanation

    Example

    http://jsbin.com/uqufev/1/edit