$(".fancybox").fancybox();
The HTML is this:
<img src="img/team/max.jpg" alt="max" class="kat"/>
<ul class="referenzen">
<li>
<a class="fancybox" data-title-id="title-1" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
<a class="fancybox" data-title-id="title-2" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
</li>
</ul>
If i click the img class="kat" the fancybox should start with the a tag elements. And not with the class="kat" Element.
Can anybody help me?
I'm not sure if I understood what you're asking for, but how about something like this: Register an event handler for the first image and simulate a click on the first fancyboxed-image:
$('img.kat').click(function() {
$(this).next().find('.fancybox:first').click();
});
Related
This question already has answers here:
Change an image with onclick()
(10 answers)
Closed 1 year ago.
I have a menu with images like icons, when I click on one of them it will show something different, and I'd like to change the image when it's 'active', turn it into red and back in grey when I click on the next one, I'm sure if I'm clear. I've tried a lot of thing but nothing actually works.
How it looks right now
how it's supposed to look
and when I click on the next one
so here's my actual code, its 100% html/css but i can also use JS
thank you
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li>
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<img src="menu/cat-midi_grey.png" width="40px" class="foodmenu1" id ="img1" onclick="changeImage()"></span><br/><br/>
formule midi</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<img src="menu/cat-entree_grey.png" width="40px" class="foodmenu2" id ="img2"></span><br/><br/>
entrées</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu3" role="tab"><span>
<img src="menu/cat-piadina_grey.png" width="40px" class="foodmenu3" id="img3" ></span><br/><br/>
piadinas</a>
</li>
<li>
<a class="active" data-toggle="tab" href="#foodmenu3-1" role="tab"><span>
<img src="menu/cat-piadina_grey-1.png" width="40px" class="foodmenu3-1" id="img4"></span><br/><br/>
la pinsa</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu4" role="tab"><span>
<img src="menu/cat-pates_grey.png" width="40px" class="foodmenu4" id="img5"></span><br/><br/>
pâtes</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu5" role="tab"><span>
<img src="menu/cat-dessert_grey.png" width="40px" class="foodmenu5" id="img6"></span><br/><br/>
desserts</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu6" role="tab"><span>
<img src="menu/cat-bambino_grey.png" width="70px" class="foodmenu6" id="img7"></span><br/>
menu bambino</a>
</li>
</ul>
</div>
You can use a simple JS function for that.
First of all, add the onclick="changeImage(this);" to every img tag you want to handle it's click event.
Then, add this html tag to contain the JS code:
<script>
var prevImage = undefined;
function changeImage(imgElement) {
if(prevImage) {
prevImage.src = prevImage.src.replace('red', 'grey');
}
imgElement.src = imgElement.src.replace('grey', 'red');
prevImage = imgElement;
}
</script>
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I have an html like this
<ul class="products">
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img1.jpg"/>
<img src="img1-1.jpg"/>
</span>
</a>
</li>
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img2.jpg"/>
<img src="img2-2.jpg"/>
</span>
</a>
</li>
//some other li elements
</ul>
What I want to do is get the fist image in the first li element and remove that with jQuery.
What I've tried
jQuery (document).ready(function(){
jQuery('.products li:first .featured-image img:first').remove();
});
But that removes all img under first span.
Any help is appriciated.
You can select first li and then find first img inside it and remove it DEMO.
$('.products li').first().find('img').first().remove()
Another way to do this is
$('.products li:first img:first').remove()
This works for me, where I look for the first direct child img of the first .featured-image element
jQuery (document).ready(function(){
jQuery('.featured-image:first > img:first').remove();
});
My code doesn't work.
Currently the mouse over part is working but not mouse out .
here is my code:
<script type="text/javascript">
function changeBtn(x){
x.style.marginTop="50px";
}
function returnBtn(y){
y.style.marginTop="-50px";
}
<ul>
<li> <img src="images/home.gif" alt="home" onmouseover="changeBtn(this)" onmouseout="returnBtn(this)"></li>
</ul>
Firebug shows an error on line 6 :"marginTop is ignored"
The answer is :
<a href="home.html" target="content" onmouseover="document.getElementById('homeImg').src='images/frnds-btn.gif';" onmouseout="document.getElementById('homeImg').src='images/hobbies-btn.gif';" ><img src="images/home-btn.gif" alt="home" id="homeImg" ></a>
i used other images to test the current code.
I have a lot of items defined by del1, del2, del3 and so on.
How do I set my .click to be .del1 delete(1) and .del2 delete(2)?
<li>
http://www.
<a href="#">
<img class="del1" src="images/page_white_delete.png" title="Delete">
</a>
</li>
<li>
http://www.
<a href="#">
<img class="del2" src="images/page_white_delete.png" title="Delete">
</a>
</li>
jQuery:
$(".del1").click(function(){
favs.webdb.deleteTodo(1);
});
The old code was written like this:
<li>http://www.tes.com
<a href="javascript:void(0);" onclick="favs.webdb.deleteTodo(1);">
<img src="images/page_white_delete.png" title="Delete">
</a></li>
I also think I might have to do a jquery live click because the webdb doesn't load until the page finishes loading.
Use a generic class and a data-* attribute:
<img class="del" data-number="1" src="images/page_white_delete.png" title="Delete">
<img class="del" data-number="2" src="images/page_white_delete.png" title="Delete">
$(".del").click(function(){
favs.webdb.deleteTodo($(this).data("number"));
});
If you can't modify the HTML, you can extract the number from the class name:
$('img[class^="del"]').click(function() {
var class = $(this).attr('class');
var number = parseInt(class.slice(3), 10);
favs.webdb.deleteTodo(number);
});
you'd better set a special attribute like:
<img class="del" data-node-id="1" src="images/page_white_delete.png" title="Delete">
then:
$('img.del').click(function(){
favs.webdb.deleteTodo( $(this).data('node-id') );
})