Develop Reference

Is it possible to intercept http calls to images and change them with javascript?

I want to add some arguments to all images in a website, but these are dynamic.
Unfortunately the (only) way I have to do this would be by intercepting the image before loading. Javascript would be the only way to go here since I can change the header.
Any third party libraries like jquery are not an option.
Something like:
http://www.example.com/acme.jpg
Would be captured and transformed into
http://www.example.com/acme.jpg?v=120
The way I see it javacript would have to be, inline, in the header of the page, before the images start to load. I don't need to change the html itself, only intercept when the browser calls the image and tweak it a bit as ilustrated.
Is this possible?

You could try this jquery solution :
$(function() {
$( "img" ).load(function() { // select your images here
var src = $( this ).attr("src");
$(this).attr("src", src + "?v=120" ); // set the new url here
});
}

change url to reflect content on the page hidden / displayed with Javascript

I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. slightly above the main big image to the right an option can be found to choose between images / information. I use Jquery to show and hide the information or the images, however i don't feel this is such a great way to do so. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/
Here is the relevant Javascript:
$(".selector a").click(function(){
if ($(this).attr("data-show") == "images") {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
} else if ($(this).attr("data-show") == "info") {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
}
})
Relevant HTML:
<p class="selector">images | information</p>
My problem is that the url does not change to reflect the content, but I do not want to make a separate page. I could imagine i would need to make use of link anchor's but am not to sure how to do so.
Thank you in advance

You can change the hash of an url by using:
window.location.hash = 'images';
EDIT:
Firstly, in this context you don't need to include the hash symbol!
Secondly, I missed the obvious, you only need to change the HTML to this to update the URL correctly:
<p class="selector">
images
information
</p>
Then you can use the following in your jQuery, note I've included the attribute check inside the selector itself:
$(".selector a[href=#images]").click(function() {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
});
$(".selector a[href=#info]").click(function() {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
});
If you want to refresh the page and get the same content, you can check the hash tag by doing the following (you may need to edit this depending what elements are showing initially):
$(document).ready(function() {
if (window.location.hash == '#images') {
$("#info").hide();
$("#displayImg").show()
$("#imageFlow").show();
}
else if (window.location.hash == '#info') {
$("#displayImg").hide();
$("#imageFlow").hide();
$("#info").show();
}
});

If all you're doing is setting text in the URL, you can do this easily by setting location.hash
location.hash="#SomeTextHereThatMayOrMayNotNecessarilyBeAnAnchor"
^ Note that "#" is important

Adapt slimbox title replace code to work with image map slimbox

Ok so I am utilizing a slimbox with an image map by including this on my main page html:
<script type="text/javascript">
jQuery(function($) {
$("#MapId area").slimbox();
});
</script>
and this is working fine, it now loads the different image map locations in slimbox when clicked.
What I need now however, is a piece of code I used before with the "rel" attribute that basically placed a download link in the "title" but grabbing the .href name and replacing the end portion of the name with _lg.jpg to give a high res image download. This worked great with the "rel" option, however I am not able to get it working for the image map "area" use instead. Here is the code as it works with the "rel" portion:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, function(el) {
return [el.href, el.title + '<br /> Download this image in Hi-Res'];
}, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
As you can see slimbox was grabbing the href link and amending it with the _lg.jpg extension and placing a link for the user in the title.
In theory, this same code should work if I just changed the jQuery(function($) {
$("a[rel^='lightbox']").slimbox() to jQuery(function($) {
$("#MapId area").slimbox() and left the rest of the code the same to place a link in the title.
However I have tried a few variations of this and none of it has worked..
Any ideas? Thanks in advance!

Ok I figured this out for anyone else who may be wanting to utilize code that will:
A) allow you to place a link to the slimbox image in the title of each lightbox without adding a ton of code to each. All you have to do is use the provided code and then place your image you want to link to in the same folder as the lightbox image and add "_lg.jpg" to the title of the linked image and the code tells it to link to the one named "_lg.jpg".
and then
B) allows you to use an image map to activate the slimbox, not just individual images, by placing $("#map area").slimbox() where #map is whatever your map id value is and the area portion tells it to activate upon the map area being pressed as opposed to your usual rel tag.
You can always still use the jQuery(function($) {$("a[rel^='lightbox']").slimbox() tag instead of you don't need the image map part, but still want to use the download link in the title.
Here is the code I added directly in the pages HTML:
<script type="text/javascript">
jQuery(function($) {
$("#map area").slimbox({/* Put custom options here */}, function(el) {
return [el.href, el.title + '<br /> Download this image in Hi-Res'];
});
});
</script>
Again this means you don't have to place a different image link in every single image Title, it will automatically look for the image that has the same name as your slimbox image but with the
_lg.jpg" added instead. Saves a lot of time and hope this helps someone!

Transferring Onclick Function to jQuery

I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:
$(document).ready(function(){
$(".wheelFinishThumbs a").click(function() {
var mainImage = $(this).attr("href");
var mainTemp = mainImage.replace(/-mid/,'');
var mainTemp = mainTemp.replace(/png/,'jpg');
$("#main_view img").attr('src', mainImage );
$("#main_view a").attr('href',mainTemp);
return false;
});
I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images
Click to download
but since "image.jpg" has to be my dynamic variable some how I've got to call this argument in the jQuery image replacement function and replace "image.jpg" dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.
My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.

This should work, assuming you are using jQuery 1.7+
Assuming your a tag markup is like this after you dynamically set the href to new image
Download Image
JavasScript
$(function(){
$(document).on("click","#main_view",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
});
});
Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID's should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this
<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>
And Update my script like this
$(function(){
$(document).on("click",".aDownloadble",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
});
});
jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.

$(document).ready(){
$("#main_view a").click(function() {
// Code to run when user clicks on link
});
});

How to add a text in a certain div when click in a link

This is my first incursion in jQuery so I am really newbie with this. I read the documentation (actually, I am still on it) to get to know it better!
The thing is that I have a website with several links into a li element and I want to achieve that every time I click in one of these links, a certain piece of text will appear in a div id="container" in the webpage.
How could I do this?

Quick, simple answer:
$('#yourlist li a').click(function(){
//grab link's href attribute
var href = $(this).attr('href');
//update content
$('#container').html("Loading page " + href + "...");
//load page via AJAX using link's href
$('#container').load(href);
});
I added more code to show how you would access the given link using $(this) and further load its href via AJAX.

$('li a').click(function(){
$('#container').html('Text you want to add');
});

try
<script src="your/downloaded/jquery/path.js></script>
<script>
$(document).ready(function() {
$('a#idOfLink').click(function() {
$("div#container").html("<span class='red'>Your certain text</span>");
});
})
</script>