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>
Related
I want to load an image into a Div when I click on thumbnail image & when I click the image in Div it should pop-up in a new window (full size image)with all other thumbnail images as navigational pane.
I can load images into a Div & my second requirement is 100% similar to this plugin
https://41db8e9483f1ef6631809a5ed661fd36970b368a.googledrive.com/host/0B-XtjO0RzRaHbFI0TzFwV2FNYjg/example.html .
But it needs all the anchor "" tags in DIV with thumbnail image sources to load the thumbnail pane.
Can anyone help me to achieve this or is there any other plugin with a thumbnail pane & popup window?
(ColorBox is Ok but it doesn't have a thumbnail pane)
<div class="col-sm-8" style="float:left">
#foreach (var image in Model.Images)
{
<div class="gallery-item" id="gallery">
<a href="~/#image.ImageUrl" class="gallery-tem">
<img style="max-height:100px; max-width:100p src="~/#image.ThumbNailUrl" class="img-responsive" />
</a> <br />
</div>
}
</div>
<div class="col-sm-4" id="imageBox" style=" float:left">
<img src="~/#Model.MainImageUrl" />
</div>
<script>
$(".gallery-item a").click(function (evt) {
evt.preventDefault();
$("#imageBox").empty().append(
$("<img>", { src: this.href })
);
});
<script/>
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
I have a div clalled product_main_img that is the full standalone image. I then have four thumbnail images that are underneath switch when clicked switch with the main image to become the full displayed image.
What I need to accomplish is have the standalone image (the first one on page load) change to the image that is being clicked, and then have the standalone image move into the thumbnail section.
I have the thumbnails moving into the main div area, but the standalone image is then disappearing.
div class="product_visuals">
<div class="product_main_img">
<div class="main_img_switch"><img src="/images/main_img.jpg"></div>
</div>
<div class="product_selection">
<div class="product_details">
<img src="/images/img_01.jpg">
</div>
<div class="product_details">
<img src="/images/img_02.jpg">
</div>
<div class="product_details">
<img src="/images/img_03.jpg">
</div>
<div class="product_details">
<img src="/images/img_04.jpg">
</div>
</div
script:
$('.product_details img').click(function() {
$('.main_img_switch img').attr("src", $(this).attr("src"));
});
save a reference of the standalone image in a variable, something like this:
$('.product_details img').click(function() {
var mainImg = $('.main_img_switch img');
var tempSrc = mainImg.attr("src");
mainImg.attr("src", this.src));
this.src = tempSrc;
});
My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Replace Div with another Div
Hi,
I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..
Something like this might help you:
//Using jQuery Change div attribute "id" on click:
$('#link_1_id').click(function(){
$('#img').attr('id','img2');
});
Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:
HTML:
Press me
Press me
<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>
Jquery:
$(document).ready(function(){
// Hide div 2 by default
$('#div_2').hide();
$('#link_2').click(function(){
$('#div_1').hide();
$('#div_2').show();
});
$('#link_1').click(function(){
$('#div_2').hide();
$('#div_1').show();
});
});
To add sliding effects take a look at .slideDown() or slideUp().
http://api.jquery.com/slideDown/
Try this:
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
in html
Menu 1
Menu 2
<div id="img">
//--- div content
</div>
<div id="img2">
//--- div content
</div>
in js:
function changeDiv(i){
if(i==1)
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
else
document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}
Try this:
HTML:
<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>
<div class="main" style="width:170px;height:170px;border:1px solid #000;overflow:hidden;padding:10px;position:relative;left:0;top:50px">
<div class="wrapper" style="width:350px;position:absolute">
<img src="image/Example.jpg" class="image_1 image" style="margin:10px;display:inline;height:150px; width:150px"/>
<img src="image/pr_4.jpg" class="image_2 image" style="margin:10px;display:inline;height:150px; width:150px"/>
</div>
</div>
JQUERY:
$('.link_1').click(function(){
$('.wrapper').animate({'left':'-170px'},'linear');
});
$('.link_2').click(function(){
$('.wrapper').animate({'left':'10px'},'linear');
});