I have this simple bit of HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" class="btn btn-primary">Small (32)</button>
<button href="#" class="btn btn-danger">Medium (64)</button>
<button href="#" class="btn btn-warning">Large (128)</button>
<hr />
<img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png">
<img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png">
<img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png">
<img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png">
<img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
I'm trying to work out if it would be possible to use javascript to set the image source by clicking the buttons at the top of the snippet.
For example - when the page first loads, the image url is hard coded as:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png
But then if a user were to click the Small (32) button, is it possible for all of the image source URLs to be updated without a page load to e.g. for a single image:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f383.png
And the equivalent for the Medium and Large buttons?
I have searched for e.g. replacing part of an img src, and found this post:
Changing part of image's source
With this solution:
$(function(){
$('#myLink').click(function(){
$('img').each(function(){
var $this = $(this)
$this.attr('src',$this.attr('src').replace('gray','green'))
})
})
})
However - in my case, I wouldn't be only replacing one value with another, but would need to change between 32, 64 and 128 depending on which button is clicked.
A simple solution to your problem is by giving each button an id represent the number to change this size for like this example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" id="32" class="btn btn-primary">Small (32)</button>
<button href="#" id="64" class="btn btn-danger">Medium (64)</button>
<button href="#" id="128" class="btn btn-warning">Large (128)</button>
now add a script that select all this buttons by their id and then add listener to the click event and change the src attribute for all the images by selecting all of them
this is the complete solution
const small = document.getElementById('32');
const medium = document.getElementById('64');
const large = document.getElementById('128');
// select all images
const allImages = document.querySelectorAll('.swap') ;
// this function takes number and change the src of all images
function changeImagesSrc(number) {
allImages.forEach(img=>{
// here we use regular expression to select the number and change it to a new one
img.src = img.src.replace(/32|64|128/,number);
})
}
small.addEventListener('click',()=>{
changeImagesSrc(32);
})
medium.addEventListener('click',()=>{
changeImagesSrc(64);
})
large.addEventListener('click',()=>{
changeImagesSrc(128);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" id="32" class="btn btn-primary">Small (32)</button>
<button href="#" id="64" class="btn btn-danger">Medium (64)</button>
<button href="#" id="128" class="btn btn-warning">Large (128)</button>
<hr />
<img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png">
<img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png">
<img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png">
<img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png">
<img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
Related
I have a part in my site that dedicated to changing the language.
Right now, in a circle button, i have united-kingdom flag. This is the default option.
<a class="nav-link-language js-language-trigger">
<img src="http://my-site.test/wp-content/uploads/2018/04/260-united-kingdom.png" alt="">
For example i have an option for German Language
<div class="nav-link-language-holder">
<a><img src="http://my-site.test/wp-content/uploads/2018/04/260-germany.png" alt=""><i>German</i></a>
</div>
How can i set with javscript, when user click on the icon for Germany, it will be replaced for the default option (right now is united-kingdom)
Thanks a lot
Here's a quick way to change your img src :
<img id="Your_IMG_ID" src="olg-img-src.png">
<button onclick="change_img_src()">Change SRC</button>
<script>
function change_img_src() {
document.getElementById("Your_IMG_ID").src = "new-img-src.png";
}
</script>
To generalize what you're looking for and further simplify it, here's a way to do it :
<!--- Your main flag --->
<img id="main-flag" style="cursor:pointer" src="img.png"/>
<!--- Rest of flags --->
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-2.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-3.png"/>
<!----Other flags---->
<script>
function Change_flag(_src) {
document.getElementById("main-flag").src = _src;
}
</script>
I'm in the process of finding a mobile alternative to Colorbox. Swipebox seemed like a great alternative, but unlike colorbox it doesn't seem to allow every individual image open but combined all of them into a gallery. The conventional way of adding swipebox is as so:
$('.class').swipebox();
which adds everything with that class into a swipebox gallery. Is there a way to instead open each item of a certain class individually?
It looks like you just need to separate your images into "galleries", which may seem counter intuitive as you don't want galleries...
Check the advanced docs for gallery:
You can add a rel attribute to your links to separate your galleries.
Like I said it's counter intuitive, but the feature that's designed to group images together into galleries can be used to separate them. Basically you're setting up galleries of one by adding a different rel attribute to each one.
Working Example on jsFiddle
$('.swipebox').swipebox();
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
If adding a rel attribute to every swipebox looks tedious, you can add the rel attribute with a little script:
$('.swipebox').swipebox();
var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
X += 1; //increment the global var by 1
$(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
My simple solution :)
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
$( '.swipebox2' ).swipebox();
} )( jQuery );
</script>
<img src="small/1-1.jpg" />
<img src="small/1-2.jpg" />
<img src="small/2-1.jpg" />
<img src="small/2-2.jpg" />
I have this menu made out of imagelinks on my website and want to have a different MouseOver function on every menuobject, i have tried like this but it always goes for the later script so when i hover start it changes to info.
<script language="javascript">
function MouseRollover(start) {
start.src = "starthover.png";
}
function MouseOut(start) {
start.src = "startidle.png";
}
</script>
<script language="javascript">
function MouseRollover(info) {
info.src = "infohover.png";
}
function MouseOut(info) {
info.src = "infoidle.png";
}
</script>
and for the links i got this:
<a href="test.html">
<img src="startidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
<a href="test.html">
<img src="infoidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
I wonder if there is any way to classify these functions so i can get the same function but different pictures for my menu?
Your 2nd script is overwriting the first one, which means every time you call "MouseRollover" or "MouseOut", your js will go for the 2nd script.
You can work with only one function that will swap you images, no need to have four functions.
<head>
<script>
function swapImg(element, img) {
element.src = img;
}
</script>
</head>
<body>
<a href="#">
<img src="startidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img01.jpg')"
onMouseOut="swapImg(this, 'img02.jpg')" />
</a>
<a href="#">
<img src="infoidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img03.jpg')"
onMouseOut="swapImg(this, 'img04.jpg')" />
</a>
</body>
Plus, it's "border" instead of "boarder".
You need only one function in your javascript.
Try it:
HTML
<a href="test.html">
<img src="startidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'starthover.png')"
onMouseOut="MouseOut(this, 'startidle.png')" /></a>
<a href="test.html">
<img src="infoidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'infohover.png')"
onMouseOut="MouseOut(this, 'infoidle.png')" /></a>
JAVASCRIPT
function MouseRollover(obj, image) {
obj.src = image;
}
function MouseOut(obj, image) {
obj.src = image;
}
Edit: You could use only one function
function changeImage(obj, image){
obj.src = image;
}
I'm wanting to use toolbar.js from http://paulkinzett.github.io/toolbar but even though I have the tool bar working the the handling of the events as documented I don't seem to be able to get identify which toolbar button/icon I clicked.
Below is the code snippit, which it pretty much lifted from the example site.
I'm no expert in JS, so if someone could enlighten me as to how to handle the toolbarItemClick event so that I can preform the correct action, that would be awesome.
Thanks
Lionel
<div id="user-options" class="toolbar-icons" style="display: none;">
<i class="icon-edit"></i>
<i class="icon-trash"></i>
</div>
<div class="tooltip-container normal">';
<section class="left">';
<div id="normal-button" class="settings-button"><img src="/3rdparty/paulkinzett-toolbar/documentation/img/icon-cog-small.png" /></div>';
</section>';
</div>
$('#normal-button').toolbar({content: '#user-options', position: 'top'});
$('#normal-button').on('toolbarItemClick',
function(event) {
console.log(event);
}
);
I was trying to figure out the same thing, eventually i deciphered the mechanism. A bit late to help you but maybe it will save someone else some time.
Firstly, I gave the button anchor tags IDs, though one could use data- attributes etc (note i am using img tags instead of the default glyph support)
<div id="user-toolbar-options">
<a id="menu-insert" href="#"><img src="add.png" width="18px" height="18px" /></a>
<a id="menu-remove" href="#"><img src="remove.png" width="18px" height="18px" /></a>
</div>
The key is to use a different function signature which isn't publicized in the documentation (function (event, buttonClicked){}, the 2nd parameter (buttonClicked) is the a element that was clicked on.
in the code below i also set targetBlock to the div that the button was in (as i have potentially dozens of articles and the button thats hows the toolbar appears on each) so i need to get the article in question to act on it.
$('#normal-button').on('toolbarItemClick',
function (event, buttonClicked) {
var targetBlock = $(event.target).parents('.article') // get article
var buttonClickedID = buttonClicked.id // get the id of the button click
switch (buttonClickedID) {
case 'menu-insert':
insertNewArticleBelow(targetBlock)
break;
case 'menu-remove':
removeArticle(targetBlock)
break;
}
}
$('#button').toolbar({
content: '#toolbar-options',
position: 'top',
style: 'primary',
event: 'click',
hideOnClick: true
});
$('#button').on('toolbarItemClick',
function( event,buttonClicked ) {
alert(buttonClicked.id);
}
);
<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/>
<link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div id="toolbar-options" class="hidden">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
<div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id="button"><i class="fa fa-cog" style="position: relative"></i></div>
I've looked into Javascript for this solution but I'm afraid my knowledge for this is just too limited. I'm guessing the solution to this issue would have to be solved with "nodes" but I just can't wrap my mind around how...
I'm looking to bypass image removal on the following website by changing the image source.
Website link
<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url">
<div class="cover-image cover-image--no-content" style="background-image: url('http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png');">
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
<div class="text-over-image ">
<span class="text-over-image-text">In the Court of the Crimson King</span>
<br/>
<span class="text-over-image-text text-over-image-text--secondary">148,881 listeners</span>
</div>
</div>
</a>
Now I've tried very basic functions like 'replace.' but I got no results for that. Is there a way to change the following,using JavaScript, depending on the URL at the top of the code?
Example:
<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>
<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>
Into:
<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="COVERFORA.JPG" alt="" />
...
</a>
<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="COVERFORB.JPG" alt="" />
...
</a>
I apologize for the little material I'm offering myself but I'm just wondering if there's actually a solution to this.
Thanks for taking the time to read this post.
Cheers!
Edit:
A few examples of the source code from the following website: http://www.last.fm/music/King+Crimson/+albums
<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url">
<img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for In the Court of the Crimson King" class="rounded" width="220" height="220" />
</a>
<a href="/music/King+Crimson/Red" class="g3 album-item-cover link-hook" itemprop="url">
<img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for Red" class="rounded" width="220" height="220" />
</a>
Now, the idea is to insert my own image sources into each of these but obviously it's trickier because all of the links have the same image as default.
Not entirely sure what you want to do
var albumCover = document.querySelectorAll('.g3.album-item-cover.link-hook'), // get all links
i = albumCover.length,
a, img,
dict = { // link dictionary, href : src
'/music/King+Crimson/In+the+Court+of+the+Crimson+King' : 'http://photobucket.com/InTheCourt.jpg',
'/music/King+Crimson/Discipline' : 'http://photobucket.com/Discipline.jpg'
};
while( --i >= 0 ) { // loop over each link
a = albumCover[i]; // that link
img = a.getElementsByTagName('img')[0]; // that image
img.src = dict[a.getAttribute('href')] // replace src on that image based on that link
|| img.src; // else no change
}
$('a.album-item-cover > img.rounded').each(function(e) {
var $this=$(this);
$this.attr('src',this.parentElement.href
.replace(/^.*\/([^\/]+)$/,'Cover_for-$1.jpg'));
}
);
$1 here is string after last /