I'm pretty new to JS, jQuery and all the others.
I have a navigation bar for an app with in the top a picture that needs to change when I click on a picture/link on my homepage.
HTML for navigation that will need to change
<img class="campus" src="img/Dansaertrond.png">
<h4>Stuvo <span class="light">EhB</br>
Campus</span></h4>
HTML for the homepage where the pictures come from to change
<div class="campus">
<a href="#">
<img class="photo" src="img/Dansaert.png">
</a>
<a href="#">
<img class="photo2 " src="img/kaai.png">
</a>
<a href="#">
<img class="photo" src="img/ttk.png">
</a>
<a href="#">
<img class="photo2 " src="img/RITS.png">
</a>
<a href="#">
<img class="photo" src="img/KCB.png">
</a>
<a href="#">
<img class="photo2 " src="img/jette.png">
</a>
</div>
To explain fast - if you start the app you see your homepage with all pictures, you click one and that picture then appears in the navigation screen, same if you change it again.
The normal things you find to change img src aren't the things I need cause that mostly just changes the picture by clicking on it, which I do not need to.
Does anyone has any idea how to do this / if it's possible?
First, it would be easier to answer if you included some better information about your challenge, maybe some code snippets. Would this answer your question?
Changing the image source using jQuery
Otherwise,
I think what you have can be modelled by three elements. You click on one of the homepage elements and it changes the image source on the nav bar element.
$('#red').click(function() {
$('#nav-img').attr("src","red.png").removeClass('green').addClass('red');
});
$('#green').click(function() {
$('#nav-img').attr("src","green.png").removeClass('red').addClass('green');
});
#red, .red {
background-color: red;
height: 20px;
width: 20px;
}
#green, .green {
background-color: green;
height: 20px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-bar">
<img src="red.png" id="nav-img" class="red">
</div>
<div class="home-content">
<img src="red.png" id="red">
<img src="green.png" id="green">
</div>
Instead of getting image after click you can play the image as carousel.
Try this:
Bootstrap Carousel
$(document).ready(function() {
$('div.campus img').on('click', function() {
var newSrc = $(this).attr('src');
$('img.campus').attr('src', newSrc);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="campus">
<img src="http://www.adweek.com/socialtimes/files/2012/03/The-Reply-Girl.jpg" />
<img src="http://3.bp.blogspot.com/-e3s1wReW3d4/TgYzS8hG1CI/AAAAAAAAABM/NzRYQFTWWbM/s200/kim-kardashian-troy-jensen-nice.jpg" />
<img src="http://slodive.com/wp-content/uploads/2012/10/gossip-girl-hairstyles/gossipgirlhairstyles200.jpg" />
</div>
<hr />
<img class="campus" src="http://lorempixel.com/200/200" />
Make sure the image on which you want the click trigger has the class .trigger, and the image where you want to change the src has the class .target. Or replace those classes by class name you currently use.
$('img.trigger').on('click', function() {
var newSrc = $(this).attr('src');
$('img.target').attr('src', newSrc);
};
Edit: I'll adjust the solution to your code:
$('div.campus img').on('click', function() {
var newSrc = $(this).attr('src');
$('img.campus').attr('src', newSrc);
};
You will probably want to initialize the event handlers when the page has loaded. The common way to achieve this in jQuery is using $(document).ready():
$(document).ready(function() {
$('div.campus img').on('click', function() {
var newSrc = $(this).attr('src');
$('img.campus').attr('src', newSrc);
};
});
Fully working example: http://codepen.io/anon/pen/oXzZBB
Related
hello I am new in jquery, in my website I have mini slider please see demo here:
http://kulinari.ge/4x4/en/cars
Here I have two slider, the problem is that the slider is repeated in the second slider images and second slide images repeated first slider images, on hover. there is my jquery code, sorry for my bad english. how i can prevent this?
jQuery(document).ready(function () {
jQuery(".cars-img img").attr("src", jQuery(".img-log img").eq(0).attr("src"));
jQuery(".img-log img").eq(0).attr("class", "active");
jQuery(".img-log img").hover(function () {
jQuery(".cars-img img").attr("src", jQuery(this).attr('src'));
jQuery(".img-log img").removeAttr("class", "active");
jQuery(this).attr('class', 'active');
});
});
there is html
<div class="cars-img">
<img src="big image link" alt=""/>
</div>
<div class="img-smol">
<div class="img-log">
<a href="#">
<img src="small image link" alt=""/>
</a>
</div>
</div>
I'm working on a website on WordPress and the following code is being generated by a WordPress theme several times:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</div>
And I need to move the <a> tag on each generated piece of code to "wrap" another section of the code, It should be like this:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<a href="http://mysiste.com/relaunch/portfolio/mysite/">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</a>
</div>
Since I can't edit the code because everything is generated by WordPress shortcodes. Is there a way to do it using JavaScript or jQuery for all the generated divs?
There might be cleaner solution, but this will get the job done in jQuery
$(function(){ // is runned after the page loads
$('.portfolio-thumbnail-container').each(function() {
var a = $(this).find('a'); // extract <a/> in a variable
a.parent().html(a.html()); // replace the content of a's parent with a's content
$(this).wrap(a.empty())); // wrap the thumbnail-contailer with the <a> tag, replacing the old content of a with ''
});
});
Note that with this solution all elements with class portofolio-thumbnail-container will be altered and it requires that the 'a' tag is always inside the h5. If your page does not meet these, you may need to change some selectors. If you're having problems with that leave a comment.
demo: https://jsfiddle.net/2gtq7qo9/1/
in javascript without jQuery
[].forEach.call(document.querySelectorAll('div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a'), function(a) {
var h5 = a.parentNode;
var figure = h5.parentNode.parentNode;
var div = figure.parentNode;
div.appendChild(a);
h5.textContent = a.textContent;
a.textContent = '';
a.appendChild(figure);
});
div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a doesn't have to be so nasty - whittle it down to maybe something like div.portfolio-post a or something like div[id^="post-"] a as per the jQuery answer
You just have to apply that div id
document.getElementById("lnk").href = "https://jsfiddle.net/Parth_Raval/67n70pe2";
This is very easy with jQuery:
$(".portfolio-thumbnail-container").click(function(){
window.location.href = "http://mysiste.com/relaunch/portfolio/mysite/";
});
First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.
You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});
First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});
I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.
Today I am building my self a vertical navigation menu and I'm wondering how I would go about build a particular feature I was thinking of.
Here is the coding behind my buttons:
html:
<div class="button"><a href="#">
<img src="../images/article.png" />
<p>Articles</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/leaderboards.png" />
<p>Leaderboards</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/events.png" />
<p>Events</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/search.png" />
<p>Search</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/other.png" />
<p>Other/Tools</p></a>
</div>
css:
.button{
border-left:10px solid #e5dad6;
padding-left:5px;
margin-bottom:20px;
width:120px;
height:120px;
text-align:center;
}
My Goal:
Now my goal is to change the image of the relevant buttons when a user hovers over the whole div (button div), now of course I can do this by adding a hover state in css, but that's not what I want to do, because I don't want to just change that particular div.
What I want:
I want it so I can basically say = if .button is being hovered over, then change the img src of something else on the page, NOT change something related to the element being hovered over.
Do something like this with jQuery:
$(document).ready(function() {
var oldSrc = $('.myNewImage').attr('src');
$('.button').hover(function() {
//on hover of your element
$('.myNewImage').attr('src','http://mynewimagesrc.com');
}, function() {
//when the cursor leaves your element
$('.myNewImage').attr('src', oldSrc);
});
});
You'll have to switch out the .myNewImage, class for the actual class of the image on your page but that should work for what you're asking. It also assigned the original source of your image so that you can always return the element back to it.
you may want to check .hover() for jQuery
You can do what you want really easy with jquery.
<div class="button" id="article_button"><a href="#">
<img src="../images/article.png"/>
<p>Articles</p></a>
</div>
$('.button').on('hover', function(){
$('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
$('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});
Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet