Develop Reference

How can I change the icons of my website using JavaScript?

I'm working on a website project and I would like to have a page with a big python icon in the right and other langages icon in the bottom (in a little size). When an icon is clicked, it has to replace the python icon. This one can also be replaced if an other icon is clicked, etc...
I have a problem with my javascript; there is my HTML :
<section>
<div class="content">
<div class="imgBox">
<img src="../images/python.png" class="python">
</div>
</div>
<ul class="thumb">
<li><img class="thumb_image" src="../images/dart.png" onclick="imgSlider('dart.png')"></li>
<li><img class="thumb_image" src="../images/flutter.jpg" onclick="imgSlider('flutter.jpg')"></li>
<li><img class="thumb_image" src="../images/html.png" onclick="imgSlider('html.png')"></li>
<li><img class="thumb_image" src="../images/css.png" onclick="imgSlider('css.png')"></li>
<li><img class="thumb_image" src="../images/js.png" onclick="imgSlider('js.png')"></li>
<li><img class="thumb_image" src="../images/java.png" onclick="imgSlider('java.png')"></li>
</ul>
</section>
<script type="text/javascript">
function imgSlider(anything){
document.querySelector('.python').src = anything;
}
</script>
Can you help me find the mistake ?

You need to change the imgSlider function to return function like this:
<section>
<div class="content">
<div class="imgBox">
<img src="../images/python.png" class="python">
</div>
</div>
<ul class="thumb">
<li><img class="thumb_image" src="../images/dart.png" onclick="imgSlider('dart.png')"></li>
<li><img class="thumb_image" src="../images/flutter.jpg" onclick="imgSlider('flutter.jpg')"></li>
<li><img class="thumb_image" src="../images/html.png" onclick="imgSlider('html.png')"></li>
<li><img class="thumb_image" src="../images/css.png" onclick="imgSlider('css.png')"></li>
<li><img class="thumb_image" src="../images/js.png" onclick="imgSlider('js.png')"></li>
<li><img class="thumb_image" src="../images/java.png" onclick="imgSlider('java.png')"></li>
</ul>
</section>
<script type="text/javascript">
function imgSlider(anything) {
return function() {
document.querySelector('.python').setAttribute('src', '../images/' + anything);
}
}
</script>
With this change the src only change when user click on the image

Replace article with div with a button that will stay and can toggle between article and div content

I want with jQuery when I click the button to toggle the content between the article and the div.
jQuery so far, but its not working as intended.
Thats all i have, i will appreciate if you guys could guide me.
$('.gal').on('click',function(){
if($('article').css('display')!='none'){
$('#vnav').html($('#vnav').html()).show().siblings('div').hide();
}else if($('#vnav').css('display')!=='none'){
$('#vnav').show().siblings('div').hide();}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="gal">Gallery</button></div>
<article>some content inside</article>
<div id="vnav" style="display:none;">
<ul id="horizontal">
<li><img src="images/1.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/2.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/3.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/4.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/5.jpg" width="782" alt="" height="440" /></li>
</ul>
</div>
Thanks in advance!

You just need to write this code to toggle between article & div on button click.
$('.gal').on('click',function(){
$('article').toggle();
$('#vnav').toggle();
});

You can try this https://jsfiddle.net/2Lzo9vfc/170/
JS
var show = true;
$('.gal').click(function() {
if(show == true) {
$('article').hide(200);
$('#vnav').show(200);
show = false;
} else {
$('#vnav').hide(200);
$('article').show(200);
show = true;
}
});

Popup doesn't show images

I have in my project a popup into my body tag and have a several data-role pages.
On each page have a button when the user click open this popup.
My problem is that I can open the popup window, but this popup contains a bxslider gallery for images and this images don't show.
Here is my code:
Paginas
Script:
$(document).on('pagebeforeshow', '#p36', function () {
$('#Paginasnocentro1234').hide();
});
$(document).on('click', '#blabla', function () {
$('#Paginasnocentro1234').toggle();
Popup:
<div data-role="popup" id="Paginasnocentro1234" data-theme="a" style="top:45px;position:absolute">
<div class="slider">
<ul class="bxslider" id="paginacao">
<li><img src="imagens/paginas/1.jpg" /></li>
<li><img src="imagens/paginas/2.jpg" /></li>
<li><img src="imagens/paginas/3.jpg" /></li>
<li><img src="imagens/paginas/4.jpg" /></li>
<li><img src="imagens/paginas/5.jpg" /></li>
<li><img src="imagens/paginas/6.jpg" /></li>
<li><img src="imagens/paginas/7.jpg" /></li>
<li><img src="imagens/paginas/8.jpg" /></li>
<li><img src="imagens/paginas/9.jpg" /></li>
</ul></div>
</div>

In Chrome, right click and inspect element in pop-up where the images "should" be. Find out what rule is being over-written. From there you'll see how to fix it.

Jquery Image Change -- iterating through images

If I have a set of classes that I want to integrate through, like this:
.g1 ---> .g12
How would I do that?
I have the increment thing I want to do and I believe I've written it properly, but I don't know how to concatenate that variable with the .grain so I can change only one square per click.
$("#grains").click(function(){
var x;
x++;
$(".grain").attr('src',"orangesq-01.png");
});
Here's the list item I made:
<ul id="grains">
<li><img src="blusq-01.png" class="grain" /></li>
<li><img src="blusq-01.png" class="grain1" /></li>
<li><img src="blusq-01.png" class="grain2" /></li>
<li><img src="blusq-01.png" class="grain3" /></li>
<li><img src="blusq-01.png" class="grain4" /></li>
<li><img src="blusq-01.png" class="grain5" /></li>
<li><img src="blusq-01.png" class="grain6" /></li>
<li><img src="blusq-01.png" class="grain7" /></li>
<li><img src="blusq-01.png" class="grain8" /></li>
<li><img src="blusq-01.png" class="grain9" /></li>
<li><img src="blusq-01.png" class="grain10" /></li>
<li><img src="blusq-01.png" class="grain11" /></li>
</ul>
I think you get the idea of what I'm trying to do. If I could figure out that concatenating thing, it would be awesome.

You can just append the index or just use the .eq() call if they are in order already.
var x = 0;
$("#grains").click(function(){
$(".grain" + (x === 0 ? '' : x)).attr('src',"orangesq-01.png");
//or
$(this).find('img').eq(x).attr('src',"orangesq-01.png");
x++;
});
Heh http://jsfiddle.net/mURxA/

An alternative, more dynamic approach, would be use a custom selector in conjunction with eq(0) to simply select the first image, like so:
$('#grains').click(function()
{
$('img[src="blusq-01.png"]', this).eq(0).attr('src', 'orangesq-01.png');
});
Hope you don't mind Andrew, I updated your example.

Javascript image gallery preventing the default

Hi i have a question regarding the image gallery i am trying to create. I have created a thumbnail viewer so when clicked the javascript then displays the thumbnail as a larger image on the same page, but i am required to add a way to still see the larger images when javascript is turned off. Here is my code
(javascript)
function changeImage(el)
{
evt.preventDefault(evt);
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/"+el+".jpg";
}
(HTML)
<div id="gallery">
<img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
</div>
<div id="thumb">
<ul class="thumbnail">
<li><img id="thumb" src="Assets/images/thumbs/0.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/1.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/2.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/3.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/4.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/5.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/6.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/7.jpg" /></li>
</ul>
</div><!-- thumb-->
Now i had it so the thumbnail viewer was working but after adding the javascript fail option it no longer displays the image in the gallery but instead on a separate page as it would if there was no javascript, what would be the easiest way to fix this so when the javascript is working the thumbnail image is shown in the gallery when it is not it goes into a seperate page? Any help is much appreciated

The evt variable is not declared anywhere. You would need to pass the event object into the function. Alternatively, you could put return false at the end of your onclick attributes.

Remove
evt.preventDefault(evt);
and change
<img id="thumb" src="Assets/images/thumbs/i.jpg" />
(i from 0 to 7) in your HTML codes to
<img class="thumb" src="Assets/images/thumbs/i.jpg" onclick="changeImage('i');" style="cursor:pointer;"/>
(<a> is removed, and style attribute is added to change the mouse cursor to pointer, and changed id to class - multiple elements having same ID is bad.)

Return false from the event handler:
function changeImage(el) {
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/" + el + ".jpg";
return false;
}
And in html add return statement too:
<ul class="thumbnail">
<li><img id="thumb" src="Assets/images/thumbs/0.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/1.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/2.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/3.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/4.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/5.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/6.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/7.jpg" /></li>
</ul>