On my website, I have an image viewer. Every time the user click the left or right button the url of the page will be changed aromatically. The image src uses a specific number from the url of the current page (the only number in the url). Below I have provided the code I am using. The code is working perfectly, but it is only working on mozilla firefox. How can I fix it in order to make it work for all browsers. The problem on the other browsers is that the image do not show up.
<img src="" id="image" >
<script type="text/javascript">
document.getElementById('image').src ="Images/"+location.href.match(/\d+/)+".jpg";
<br/>
document.wrriteln(location.href.match(/\d+/)+".jpg");
</script>
<br/>
<script>
var url = location.href;
function nextImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) + 1) + p2);
}));
}
function prevImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) - 1) + p2);
}));
}
</script>
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
What you should do is
<a href="#" id="prevImageControl">
and in the javascript block do
prevImageClick = function()
{
window.location.href = prevImage();
}
var prevImageControl = document.getElementById('prevImageControl');
prevImageControl.addEventListener('click', prevImageClick);
repeat for nextImage()
You need to change these:
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
To onclick events.
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
Or better still, put them into functions.
you have a double r in document.wrriteln
Related
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
I tried VBA macro from MS Word(the PC i'm currently using doesn't have much stuff), it did not turn out to be great, so I tried it with Firefox console.
This is my current code:
function stripAnchorTags(html) {
return html.replace(/\<a.*\>.*\<\/a\>/, '');
}
console.log(stripAnchorTags('<img src="image location" border="0" height="400" width="640"></div><br><img src="image location" border="0" height="400" width="640"></div>'));
Now, the output I want was
<img src="image location" border="0" height="400" width="640"></div><br><img src="image location" border="0" height="400" width="640"></div>
But instead of it, I only get </div>
I have no idea what went wrong.
try this:
you need to use "g" to replace all instances.
what you were doing was deleting everything between the tag.
function stripAnchorTags(html) {
html = html.replace(/\</a>/g, '');
html = html.replace(/\]*>/g, '');
return html;
}
===== EDIT =====
oneliner:
function stripAnchorTags(html) {
return html.replace(/\<a.*?\>(.*?)\<\/a\>/g, '\$1');
}
My website is http://acclyrics.com
The site works great on all browsers, however, one very annoying bug keeps showing up. When you go to it on chrome, it works, but if you try refreshing the page, suddenly the page seems to enter a "load forever" mode, and the picture slider I made does not work past a few images. It starts coming up blank.
Again, this ONLY happens in chrome, which is very strange, since chrome has always been the best browser for me. Does this happen for anyone else? Any tips about fixing this / working around this would be greatly appreciated.
It's not a HUGE issue, because I don't see any reason why someone would be reloading the page anyway, but it's still irritating for me.
Here is the code for my picture slider. If you need to see any other code please ask:
function StartPictureSlider() {
var NumberOfPics = 11;
var b = 2;
var c = document.getElementById('PictureSlider');
setInterval(function () {
if (b == 1) {
var previouspicture = "pic" + NumberOfPics
} else {
var previouspicture = "pic" + (b - 1)
};
var newpicture = "pic" + b;
document.getElementById(previouspicture).style.display = "none";
document.getElementById(newpicture).style.display = "block";
b++;
if (b > NumberOfPics) {
b = 1
};
}, 4000);
};
The pictures are loaded in a hidden style with HTML, so that the slider is just changing the display. Again, this works great on all the browsers, except for Chrome when refresh is hit.
<div id="PictureSlider" class="PictureSlider">
<img src='pictures/1.png' id="pic1" alt='art work' />
<img src="pictures/2.png" id="pic2" style="display:none" />
<img src="pictures/3.png" id="pic3" style="display:none" />
<img src="pictures/4.png" id="pic4" style="display:none" />
<img src="pictures/5.png" id="pic5" style="display:none" />
<img src="pictures/6.png" id="pic6" style="display:none" />
<img src="pictures/7.png" id="pic7" style="display:none" />
<img src="pictures/8.png" id="pic8" style="display:none" />
<img src="pictures/9.png" id="pic9" style="display:none" />
<img src="pictures/10.png" id="pic10" style="display:none" />
<img src="pictures/11.png" id="pic11" style="display:none" />
</div>
Ok, I believe I solved the issue. I put preload="none" into the audio tags, and now refreshing on chrome seems to be instant with no problems.
I have been trying to create a basic JavaScript snipped to slide images forward and back on a webpage when links are clicked.
Here is my js code in the <head> section of the webpage:
<script type="text/javascript">
//if browser does noe support getElementbyId then exit
var step = 1;
if ( !document.getElementById ) {
return;
}
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
function slideForward()
{
//files are named as image1, image2....
step++;
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
}
function slideBack()
{
step--;
var src = 'images/gallery_images/image'+step'.jpg';
document.getElementById('photos').src = src;
}
</script>
I bind the 2 functions for moving backwards using onclick in a tag like:
<a onclick="slideBack()">
<img src="images/gallery_06.jpg" alt="" name="left" width="26" height="90" id="gallery_06" />
</a>
<a onclick="slideForward()">
<img src="images/gallery_07.jpg" alt="" name="right" width="27" height="90" id="gallery_07" />
</a>
Any suggestions on what I am missing? Nothing is being returned.
I use this code to make a onmouseover change pictures. but in IE it works, in firefox it shows wrong, where is the problem? And can anyone add a onmouseout function that return to the first picture for me? Thanks.
<script type="text/javascript">
function changeimage(rel){
document.getElementById("image").src=rel;
}
</script>
<img src="img1.jpg" id="image" />
<a onmouseover="changeimage('img1.jpg')" rel="img1.jpg">img1</a>
<a onmouseover="changeimage('img2.jpg')" rel="img2.jpg">img2</a>
<a onmouseover="changeimage('img3.jpg')" rel="img3.jpg">img3</a>
you can use:
<script type="text/javascript">
function changeimage(rel)
{
var img = document.getElementById("image");
img.setAttribute("orig", img.src);
img.src=rel;
}
function SetOriginal()
{
var img = document.getElementById("image");
img.src = img.getAttribute("orig");
}
</script>
<img src="img1" id="image" />
<a onmouseover="changeimage('img1')" onmouseout="SetOriginal()" rel="img1">img1</a>
<a onmouseover="changeimage('img2')" onmouseout="SetOriginal()" rel="img2">img2</a>
<a onmouseover="changeimage('img3')" onmouseout="SetOriginal()" rel="img3">img3</a>
to return to the original image.
I tested this on firefox(3.6.12) and it is working