I want to run the following javascript in a Wordpress page.
Thus, I copied the script as it is directly into the source code of a page. The images are all displayed, but the "mouse over" effect is not working..
I tested the script embedded (directly as code) in a normal html page and it works perfectly.
Help and ideas greatly appreciated!
<script type="text/javascript">
var imgArray = new Array(
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg'
);
function swapImage(imgID) {
var theImage = document.getElementById('theImage');
var newImg;
newImg = imgArray[imgID];
theImage.src = newImg;
}
function preloadImages() {
for(var i = 0; i < imgArray.length; i++) {
var tmpImg = new Image;
tmpImg.src = imgArray[i];
}
}
</script>
<div id="image">
<img id="theImage" src="images/pic1.jpg" alt="" />
</div>
<div id="thumbs">
<img src="images/pic1_tn.jpg" alt="" onmouseover="swapImage(0);" />
<img src="images/pic2_tn.jpg" alt="" onmouseover="swapImage(1);" />
<img src="images/pic3_tn.jpg" alt="" onmouseover="swapImage(2);" />
<img src="images/pic4_tn.jpg" alt="" onmouseover="swapImage(3);" />
<img src="images/pic5_tn.jpg" alt="" onmouseover="swapImage(4);" />
<br />
</div>
Related
Need help I am trying to change the all images webp extension into "png" when my website load on safari browser.
Webp image path
<img class="img-fluid" src="image/img-1.webp" alt="">
<img class="img-fluid" src="image/img-2.webp" alt="">
<img class="img-fluid" src="image/img-3.webp" alt="">
I want to change into png extension
<img class="img-fluid" src="image/img-1.png" alt="">
<img class="img-fluid" src="image/img-2.png" alt="">
<img class="img-fluid" src="image/img-3.png" alt="">
$(document).ready(function () {
if($.browser.safari){
$("body").each(function(){
var imageExtension = $("img").attr('src').split('.').pop();
for(var i = 0; i < $("img").length; i++)
{
extensionChange = imageExtension.replace(imageExtension,'.png' );
console.log(extensionChange);
}
$("img").attr('src').split('.').pop();
});
}
});
you can do it without js, use tag <picture>, read about it here: how to use picture tag
You have to loop the images in body. You are almost there little bit modified your code.
if($.browser.safari){
$("body img").each(function(){
var imageExtension = $(this).attr('src').split('.').pop();
for(var i = 0; i < $(this).length; i++)
{
extensionChange = imageExtension.replace(imageExtension,'png' );
console.log(extensionChange);
}
src = $(this).attr('src');
src = src.replace(imageExtension,extensionChange);
$(this).attr('src', src);
});
}
I Hope you can help me.
When I click button it adds night before file extension ex.(interior-1.jpg to interior-1-night) but it only affects the first image which is interior-1.jpg.
What I want is to add "night" text before the file extension of all images under the "image" ID.
Here is my html code
<button onclick="changeMode()">switch</button>
<img id="image" src="interior-1.jpg"/>
<img id="image" src="interior-2.jpg"/>
<img id="image" src="interior-3.jpg"/>
<img id="image" src="interior-4.jpg"/>
<img id="image" src="interior-5.jpg"/>
Here is my javascript code
<script>
function changeMode() {
var filename = document.getElementById("image").src;
var modfilename = filename.replace(/(\.[\w\d_-]+)$/i, '-night$1');
document.getElementById("image").src = modfilename;
</script>
}
You should never use same id name on elements in the dom. Instead use same class name. To apply the src on all the img tag get all the tags using document.getElementsByClassName. Iterate over each element and change the src using a forEach loop
function changeMode() {
var filename = document.getElementsByClassName("image");
var a = '';
Object.values(filename).forEach((e) => {
a = e.src;
var modfilename = a.replace(/(\.[\w\d_-]+)$/i, '-night$1');
e.src = modfilename;
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg" />
<img class="image" src="interior-2.jpg" />
<img class="image" src="interior-3.jpg" />
<img class="image" src="interior-4.jpg" />
<img class="image" src="interior-5.jpg" />
The problem is that you are getting your element by GetElementById which only returns one element. You should change the id tag to name like this:
<img name="image" src="interior-1.jpg"/>
Then you should be able to retrieve all the elements using var els = document.getElementsByName('image');
now you need to change their file names, so
for (let i = 0; i<els.length; i++){
els[i].src = els[i].src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
}
Here is my two cents. Use classes. This way you can query multiple elements instead of just one. Then apply your changes to each element using, in this case, a forEach.
The elements returend from document.querySelectorAll is a nodeList. That's why I use Array.prototype.forEach.call.
function changeMode() {
const imageNodes = document.querySelectorAll(".image");
Array.prototype.forEach.call(imageNodes, (node) => {
let modfilename = node.src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
node.src = modfilename
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg"/>
<img class="image" src="interior-2.jpg"/>
<img class="image" src="interior-3.jpg"/>
<img class="image" src="interior-4.jpg"/>
<img class="image" src="interior-5.jpg"/>
<audio id="audio1" src="a.wav"></audio>
<audio id="audio2" src="b.wav"></audio>
<img id="img1" src="a.png" alt="" onselect="select()" />
<img id="img2" src="a.png" alt="" onselect="select()" />
<input type="button" onclick="play()">
i have multiple images in my code a and every image has its respective audio what i want to do is i want to select the image and on clicking the button i want to play the audio against that particular image .all this i want to do using javascript and html . so can any one help me javascript part?
You can do something like this using data attributes: http://jsfiddle.net/bostdgvp/
JS:
var selectedImage;
function select(image) {
var images = document.querySelectorAll('img');
var index = 0, length = images.length;
for (; index < length; index++) {
images[index].classList.remove('selected');
}
selectedImage = image.id;
image.classList.add('selected');
}
function playAudio() {
if (!selectedImage) {
alert('no image selected')
}
var image = document.getElementById(selectedImage);
var audioId = image.getAttribute('data-audio')
var audioElement = document.getElementById(audioId);
audioElement.play();
}
HTML:
<audio id="audio1" src="#Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="#Url.Content(item.Letter_Record)"></audio>
<img id="img1" data-audio="audio1" src="http://placehold.it/350x150" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="http://placehold.it/200x100" alt="" onclick="select(this)" />
<input type="button" value="play" onclick="playAudio()">
CSS:
.selected {
border: 1px solid red;
}
Just add this and it should work:
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(num){
var x = num.match('/\d+/');
var audio = document.getElementById("audio"+x);
audio.play();
}
</script>
Here is a jsfiddle that should put you in the right direction:
http://jsfiddle.net/knopch/31oasnee/
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(id){
console.log(id);
//play(id);
}
</script>
This allows you to click the image, and its id will be printed in the console (option+cmd+j on chrome+mac).
So if you have the id of the object being clicked (or selected), the select() functions really just need to pass on this id to the function that handles playback. If you have an audio file mapped to each image, you can select the audio file for playback based on the image id.
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 have a simple list of images that is being controlled via a CMS (ExpressionEngine). Like this:
<div class="wrapper">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</div>
What I want to do is for every 5 images, wrap them in a div with a class of "slide." To look like this:
<div class="wrapper">
<div class="slide">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</div>
<div class="slide">
<img src="#" />
<img src="#" />
<img src="#" />
</div>
</div>
The reason I am not manually coding the "" in is because of a jQuery content slider that I am using which requires every 5 images to be wrapped inside a slide div.
I'm not sure how what the code in ExpressionEngine would be to do this, but I figure it might just be easier to use Javascript to wrap every 5 images with the div. And to just have ExpressionEngine output the different images all at once.
Any help?
Here's one way:
Example: http://jsfiddle.net/T6tu4/
$('div.wrapper > a').each(function(i) {
if( i % 5 == 0 ) {
$(this).nextAll().andSelf().slice(0,5).wrapAll('<div class="slide"></div>');
}
});
Here's another way:
Example: http://jsfiddle.net/T6tu4/1/
var a = $('div.wrapper > a');
for( var i = 0; i < a.length; i+=5 ) {
a.slice(i, i+5).wrapAll('<div class="slide"></div>');
}
You can just create a div for every fith element and move the links into them using the append method:
var wrapper = $('.wrapper');
var div;
$('a', wrapper).each(function(i,e){
if (i % 5 == 0) div = $('<div/>').addClass('slide').appendTo(wrapper);
div.append(e);
});
Demo: http://jsfiddle.net/Guffa/ybrxu/
I think this would do that:
var links = $('.wrapper').children();
for (var i = 0, len = links.length; i < len; i += 5) {
links.slice(i, i + 5).wrapAll('<div class="slide"/>');
}
Try this:
$(function(){
var curDiv = null;
var mainDiv = $("div.wrapper");
$("span", mainDiv).each(function(i, b){
if(i%5 == 0) {
curDiv = $("<div class='slide'/>").appendTo(mainDiv);
}
curDiv.append(b);
});
});
You need to use jQuery slice with wrap
Check this question
Use slice() to select the element subset then wrapAll() to wrap the div around them. Here's a function that does that.
var wrapEveryN = function(n, elements, wrapper) {
for (var i=0; i< elements.length; i+=n) {
elements.slice(i,i+n).wrapAll(wrapper);
}
}
wrapEveryN( 5, $(".wrapper a"), '<div class="slide"></div>' );
Demo: http://jsfiddle.net/C5cHC/
Note that the second parameter of slice may go out of bounds, but jQuery seems to handle this automatically.