I use a webpage where I want to replace the onclicks, of a bunch of links, with the modified src link of the <img> each link contains.
For example, the Greasemonkey script should change this:
<p class="listphotos">
<a onclick="alert('I'm a really annoying function! X'); return false;" href="#">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="alert('I'm a really annoying function! Y'); return false;" href="#">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
To this:
<p class="listphotos">
<a onclick="http://.../max/x.jpg" href="http://.../max/x.jpg">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="http://.../max/y.jpg" href="http://.../max/y.jpg">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
I've tried this (see also this jsFiddle):
var link = $("p.listphotos a img").prop("src").replace("min", "max");
$("p.listphotos a").prop("onclick", link);
$("p.listphotos a").prop("href", link);
but the right pictures do not get linked.
Setting onclick to a link is an error. onclick needs to be valid javascript. But, since it looks like you're trying to "delink" those photos, best to remove the onclicks altogether.
Also, you can't set the href that way (unless you want every link to go to the same photo). You need to loop. jQuery's .each() should do the trick. Like so:
$("p.listphotos a img").each ( function () {
//-- `this` is each target image, one at a time
var jThis = $(this);
//-- More robust replace
var bigLink = jThis.prop ("src").replace (/\bmin\b/i, "max");
//-- The img parent is the link we're after.
jThis.parent ().prop ("href", bigLink).removeProp ("onclick");
} );
Note that prop and removeProp are the correct way to kill an onclick. But, if you inspect the page source in some browsers, the attribute will still be there. Don't worry, the onclick will no longer function.
I think you can try something like this
var numberClick=0;
var Images= ['image1.png','image2.png'];
function changeIndex(index){
if (index >=0 && index < Images.length){
$("p.listphotos a img").attr("src", Images[index]);
return true;
}
return false;
}
then you can use it in this way
function showImage(){
if (changeIndex(numberClick)){
numberClick+=1;
}
else{
numberClick=0;
}
}
and then
$("p.listphotos a img").click(function(){
showImage();
return false;
});
Related
The below code is working in firefox and chrome but not in safari. Can anybody tell me if this is the correct way to add multiple classes and id's in jquery?
jquery
$(document).ready(function () {
$('.imgLink, .imgLink1, .imgLink2, .imgLink3, .imgLink4, .imgLink5, .imgLink6,
.imgLink7, .imgLink8, .imgLink9').click(function () {
var imgPath = $(this).attr('href');
$('#theImage, #theImage1, #theImage2, #theImage3, #theImage4, #theImage5, #theImage6,
#theImage7, #theImage8, #theImage9').attr('src', imgPath);
return false;
});
});
html for .imgLink
<a class="imgLink1" href="http://www.customtie.com/images/press/printwear-11-2013.jpg">Printwear Nov 2013</a>
hmtl for #theImage
<img id="theImage" src="http://www.customtie.com/images/press/counselor-2-2014.jpg" alt="" width="auto" height="auto">
Ugh... Classes are not meant to be used that way. Rather:
FOO
BAR
<img id="theImage1" src="images/default.jpg" alt="">
<img id="theImage2" src="images/default.jpg" alt="">
$(function () { // DOM ready shorthand
$('.imgLink').click(function ( e ) {
e.preventDefault();
var imgPath = $(this).attr('href');
var targetID = $(this).data('targetid');
$('#theImage'+ targetID).attr('src', imgPath);
});
});
|→ jsBin demo
So basically you add the same class to all your clickables, and a data-* attribute with the number of the image ID suffix you want to target.
There's also other nice ways (even simpler) to achieve the same, but without seeing some HTML it's blind guessing.
I would first agree with m90's suggestion that you want to just add a single class to all these elements and select off that.
But I would presume that the issue is the carriage return halfway through your string. If you want to start a new line, you have to end the first one and then concatenate them together like this:
$('.imgLink, .imgLink1, .imgLink2, .imgLink3, .imgLink4, .imgLink5, .imgLink6,'+
'.imgLink7, .imgLink8, .imgLink9').click(function () {
var imgPath = $(this).attr('href');
$('#theImage, #theImage1, #theImage2, #theImage3, #theImage4, #theImage5, #theImage6, ' +
'#theImage7, #theImage8, #theImage9').attr('src', imgPath);
return false;
});
I have a very simple link with shadowbox like this:
index.html:
<a href='test.html' rel='shadowbox;width=400;height:300'>Go to Test</a>
And in my test.html i have this button, which i want to make a function (i think it should be in javascript) to resize the shadowbox:
test.html:
<input type="button" value="Resize this page" onClick="ResizeSB(600, 200)" />
<script>
function ResizeSB(widthVal, heightVal) {
// CODE TO RESIZE
}
</script>
How can i do this?
You wouldn't put it in a rel attribute for one...
The correct HTML markup would be:
<a href='test.html' class='shadowbox' data-width='400' data-height:'300'>Go to Test</a>
Inside your function simply do this:
function ResizeSB(widthVal, heightVal) {
var link = document.getElementsByTagName('a')[0]; // or any other identifier
link.style.width = widthVal;
link.style.height = heightVal;
}
Or even better, if you store the width and height parameters in a class, say .shadowbox_modif class...
<a href='test.html' class='shadowbox'>Go to Test</a>
And the JS
function ResizeSB(widthVal, heightVal) {
var link = document.getElementsByTagName('a')[0]; // or any other identifier
link.className += ' shadowbox_modif';
}
Note: It's less obtrusive to put the onclick handler in the Javascript, like so:
document.getElementsByTagName('input')[0].onclick = ResizeSB(400, 300);
Note2: Start JS function names in lowercase as a convention (Uppercase is reserved for 'class' functions)
Here is my code:
HTML
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction($(this))">
<img src"../MyPic_2" id="MyImg_2" onclick = "MyJQfunction($(this))">
<img src"../MyPic_3" id="MyImg_3" onclick = "MyJQfunction($(this))">
JQUERY
<script>
function MyJQfunction(MyField)
{
MyField.hide();
}
</script>
As you can see I'm trying to send the HTML element to my JQ Function so it knows what to hide.
What am I doing wrong?
NOTE: This is just a simple example of what I really need to do, I just want to avoid including codes that you don't care about. Thanks!
You are using jquery so attach an event handler instead of using onclick
<img src="../MyPic_1" id="MyImg_1" class="myIMage">
<img src="../MyPic_2" id="MyImg_2" class="myIMage">
<img src="../MyPic_3" id="MyImg_3" class="myIMage">
and
$(function(){
$('.myIMage').on('click', MyJQFunction);
}
function MyJQFunction()
{
$(this).hide(); //here this represents the element clicked.
}
Or classic way; use Function.call to set the context for the function while invocation.
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction.call(this)">
and
function MyJQFunction()
{
$(this).hide(); //and this here is now the clicked element.
}
Also in your code your image tag seems to be incorrect and MyJQfunction versus MyJQFunction has casing (note the casing of f) issue. Check your console for errors. Otherwise your code should work.
This is what I would do:
<img src="../MyPic_1" id="MyImg_1" class="image_to_hide"/>
<img src="../MyPic_2" id="MyImg_2" class="image_to_hide"/>
<img src="../MyPic_3" id="MyImg_3" class="image_to_hide"/>
...
<script>
$(".image_to_hide").click(function(){
$(this).hide();
});
</script>
You should wrap that on jquery function like this
function MyJQFunction(MyField)
{
$(MyField).hide();
}
I have the following HTML
<a onclick="hi('#i_15', 'second_img.jpg'); return false;" href="http://google.com">
<img id="i_15" src="first_img.jpg" />
</a>
So, I don't want it to follow to google.com when it's clicked, but instead just call the hi function:
function hi(id, file){
$(id).attr("src", file);
}
This is supposed to enlarge the image (by swapping first_img.jpg to second_img.jpg.)
What can I do if I want to swap it back again? As in, click on the swapped image (second_img.jpg) and have it changed back to first_img.jpg; a reversal of what the hi function does.
As for not navigating to google.com when clicked, you can just change the href to be: href="#".
For the image swap, why not make your hi function work both ways, as a toggle? You could do this:
<a onclick="swapImage('#i_15', 'first_img.jpg', 'second_img.jpg');" href="#" >
<img id="i_15" src="first_img.jpg" />
</a>
function swapImage(id, firstImage, secondImage) {
var imageToLoad = $(id).attr("src") == firstImage ? secondImage : firstImage;
$(id).attr("src", imageToLoad);
}
Something like this in your hi() function should work.
function hi(id, file){
var $id = $(id);
if($id.attr("src") == file)
{
$id.attr("src", $.data($id, "orig"));
}
else
{
$.data($id, "orig", $id.attr("src"));
$id.attr("src", file);
}
}
I am trying to do something quite simple.
I have an image with a rollover. When it is clicked the onmouseout and onmouseover events are removed and the image is swaped. Up to here I got it but now I would like to add something so that when it is clicked again everything returns to the original state (swap the image again and activate onmouseover and onmouseout.
Here is the code I got so far:
<a href="#"
onMouseOut="MM_swapImgRestore();
"
onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)"
onClick="
MM_swapImage('image','','images/image-3.jpg',1);
this.onmouseover=null;
this.onmouseout=null;
"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>
for my quite easy solution i would add a flag and check it before firing the mouseover and mouseout events as it it remove the unnecessary burden of attaching and detaching of events.
i.e like:
<script>var myFlag=true;</script>
<a href="#"
onMouseOut="if(myFlag === true){MM_swapImgRestore();}"
onMouseOver="if(myFlag === true){MM_swapImage('image','','images/image-2.jpg',1);}"
onClick="MM_swapImage('image','','images/image-3.jpg',1);
myFlag = !myFlag;"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>
Seeing as this was generated by a WYSIWYG editor (presumably DreamWeaver), I won't suggest a jQuery implementation, but rather something that would work without referencing jQuery. You could possibly try something like:
<script type="text/javascript">
var removeEvents = true;
function EventAttach(anchor) {
MM_swapImage('image','','images/image-3.jpg',1);
anchor.onmouseover = removeEvents ? null : new function() { MM_swapImage('image','','images/image-2.jpg',1) };
anchor.onmouseout = removeEvents ? null : new function() { MM_swapImgRestore(); };
removeEvents = !removeEvents;
}
</script>
<a href="#"
onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)"
onClick="EventAttach(this);"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>