web hosting
build a website

Jquery explode to change image URL

Aug 16, 2015   //   by Anthony Devine   //   Website Development tips  //  No Comments

The following is a snippet of code from a site I built and some of it may not make sense however it demonstrates how to explode an image URL in jquery and output it to how you want. So the below URL exploded on the / and on the . and then we can replace the last / and . with var first and .jpg

$j( '.MagicThumb-swap' ).click( function( ) {
            var myString = $j(this).attr( 'rev' );
            var myArray = myString.split('/');
            var myString = myArray.last();
            var myArray = myString.split('.');
            var first = myArray.first();
            var urlImage = "https://imagelink/folder/folder2/folder3/" + first + ".jpg";
            $j(this).attr( "src", urlImage );
            $j( '.MagicBoxShadow img, .MagicThumb-expanded img, .MagicZoomBigImageCont div img' ).attr( "src", urlImage );
            $j( '.MagicToolboxContainer a.MagicZoomPlus img, .MagicToolboxContainer a.MagicZoomPlus' ).attr( "href", urlImage  );
            setTimeout(function() {
                $j( '.MagicBoxShadow img, .MagicThumb-expanded img, .MagicZoomBigImageCont div img' ).attr( "src", urlImage );
                $j( '.MagicToolboxContainer a.MagicZoomPlus img, .MagicToolboxContainer a.MagicZoomPlus' ).attr( "href", urlImage  );
            },500);
    } );