3 Replies - 5556 Views - Last Post: 22 June 2010 - 07:12 AM

#1 billpull1  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 10-June 10

Jquery change image source in regular expression

Posted 10 June 2010 - 11:37 AM

Ok so I have a jquery script that when I run on my local test server it appends a string onto the end of the source but when I run it on my server it replaces the whole src.
Also I need the script to use a regular expression and trim the src before it can append the string.
so the current image would be like ( I am using drupal too ).
<img src="/sites/default/files/Person.jpg?61289291" />
I need to trim all the garbage off of the end and make it
<img src="/sites/default/files/Person_silly.jpg" />
and then on hover out it goes back to normal
I ran this script on my local server and it works, but that does not involve the garbage that drupal adds, and when run on the real server it trims the whole source to _silly.jpg instead of appending it.
<script type="text/javascript"> 
          $(document).ready(function() {
            $("img.imagefield")
				.mouseover(function() { 
					var src = $(this).attr("src").match(/[^\.]+/) + "_silly.jpg";
					$(this).attr("src", src);
				})
				.mouseout(function() {
					var src = $(this).attr("src").replace("_silly", "");
					$(this).attr("src", src);
				});
          });
        </script>


Is This A Good Question/Topic? 0
  • +

Replies To: Jquery change image source in regular expression

#2 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Jquery change image source in regular expression

Posted 10 June 2010 - 12:10 PM

I'd suggest saving the original src attribute using jquery's handy data() method:
<script type="text/javascript"> 
          $(document).ready(function() {
            $("img.imagefield")
				.mouseover(function() { 
                                        $(this).data('old_src', $(this).attr('src'));
					var src = $(this).attr("src").match(/[^\.]+/) + "_silly.jpg";
					$(this).attr("src", src);
				})
				.mouseout(function() {
					$(this).attr("src", $(this).data('old_src'));
				});
          });
        </script>


Because if there is unpredictable stuff going on in the url, it might be trickier to swap it back in afterwards, and you might as well get jquery to do the heavy lifting. The code you've got would lose the query string on mouseout. Depends what you're after, I guess.

As to your actual problem, there's nothing wrong with that regular expression (though you don't actually need to escape the dot inside square brackets) so I will assume that the original src attribute isn't what you expect. print it out with alert() (or better, console.log() if you're using firebug) and see if there's something unexpected in there. For instance, if it's using the full url you might be ending up with "http://www" as the result?
Was This Post Helpful? 0
  • +
  • -

#3 billpull1  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 10-June 10

Re: Jquery change image source in regular expression

Posted 10 June 2010 - 12:43 PM

I think that is exactly whats happening its stopping right at the www. instead of the . for the jpg i guess.
Was This Post Helpful? 0
  • +
  • -

#4 billpull1  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 10-June 10

Re: Jquery change image source in regular expression

Posted 22 June 2010 - 07:12 AM

Ok I am still trying to figure this out. I have come up with a new regular expression but it is failing to match still and it is replacing the src with a null. I think the expression cant escape itself somewhere or something.
the expression has to match a url like http://www.site.org/...files/image.jpg
and then I want it to change the source to http://www.site.org/...image_silly.jpg
here is the expression I am trying to use any suggestions would be great.
^(http|https|ftp)\://>/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/sites/all/files/[a-zA-Z]*

and here is the jquery I have at the moment, since I havent been able to get the match I want I havent implemented the code written by moopet
$(document).ready(function() {
            $("img.imagefield").mouseover(function() { 
			var regex = "^(http|https|ftp)\://>/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/sites/all/files/[a-zA-Z]*";
            var src = $(this).attr("src").match(regex) + "_silly";
                                        $(this).attr("src", src);
                                })
                                .mouseout(function() {
                                        var src = $(this).attr("src").replace("_silly", "");
                                        $(this).attr("src", src);
                                });
          });

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1