How to find Next Image src with Javascript - javascript

I have chosen this way of doing it so i can just drop a hand full of images in to a folder and that's it, I have tried many ways but nothing works, my latest attempt is using
$(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
but still no go.
This is what i have come up with so far, any help would be great, Thank's
<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
<h1> <span>The Gallery</span> </h1>
<ul id="nav">
<li>Gallery
<ul>
<li>2015</li>
<li>2015</li>
<li>2015</li>
<li>2015</li>
<li>2015</li>
</ul>
</li>
<li>Back to home</li>
</ul>
</div>
<div class="image-container"></div>
<script type="text/javascript"> $(document).ready(function () {
$("a").click(function () {
var dir_path=$(this).data("albumid");
LoadGallery(dir_path);
return false;
});
});
function LoadGallery(dir_path) {
$.ajax({
url: dir_path,
success: function(data) {
$(".image-container").empty();
$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
$(".image-container").append($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));
if ($(".image-container").children("a").length == 30) {
return false;
}
});
$(".thumb").bind('click', function() {
var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>«</label><label href='javascript:;' class='next-image'>»</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
Img = $(this).attr("data-src"),
$("body").prepend(Popup);
$(".bg").height($(window).height()*4);
$(".wrapper img").attr("src", Img);
$(".prev-image").bind ('click',function() {
alert("Prev")
})
$(".next-image").bind ('click',function() {
next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
//alert(next)
})
$(".close").bind ('click',function() {
$(this).siblings("img").attr("src", "")
.closest(".wrapper").remove();
$(".bg").remove();
});
});
}
});
} </script>
<div class="clear"></div>

The problem is in the usage of next().
From documentation - Get the immediately following sibling of each element in the set of matched elements.
And as in your case, img are not siblings, hence, there are no matched set of elements.
If your hierarchy is strict and is not going to change, then you can do something like following
/* Find image - go its parent - go to next anchor - get the image - get the source */
$(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');
Else you can iterate over the images.
For reference - http://plnkr.co/edit/onUeWl8mPqVhtaHf37xp?p=preview

Please try this:
$('#id').next().find('img').attr("src");

Related

looking for a good pratice to hide and display some divs

Hello everybody I would like to hide some divs and display others when I click on a specifiks links.
Actually I did like this :
<html>
<head>
<script>
function loadA(){
document.getElementById("A").style.display="block";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
}
function loadB(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="block";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
}
function loadC(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="block";
document.getElementById("D").style.display="none";
}
function loadD(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="block";
}
</script>
</head>
<body>
<div class="menu">
A
B
C
D
</div>
</body>
</html>
This is work with me but as you see it's not a good practice and sure there is another way better than this , can you show me please !
A solution without javascript:
.container > div{
display:none
}
.container > div:target{
display:block
}
<div class="menu">
<a href="#A" >A</a>
<a href="#B" >B</a>
<a href="#C" >C</a>
<a href="#D" >D</a>
</div>
<div class="container">
<div id="A" >A content</div>
<div id="B" >B content</div>
<div id="C" >C content</div>
<div id="D" >D content</div>
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Atarget
https://css-tricks.com/css3-tabs/
You can create one function and reuse it for each element:
function loadDiv(id){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
document.getElementById(id).style.display="block";
}
And pass the correct id into each onclick:
<div class="menu">
A
B
C
D
</div>
Here's how you should do it. No inline javascript, handling click events with an eventListener and wrapping all elements together with a class, making it much less code to write and maintain:
JS:
function divLoader(e){
var hide = document.getElementsByClassName("hideAndShow");
for (var i = 0; i<hide.length;i++) {
hide[i].style.display="none";
}
document.getElementById(e.target.getAttribute('data-link')).style.display="block";
}
var anchors = document.querySelectorAll('.menu > a');
for (var i = 0; i<anchors.length; i++) {
anchors[i].addEventListener('click',divLoader);
}
HTML:
<div class="menu">
A
B
C
D
</div>
<div id="A" class="hideAndShow" style="display:none;">A</div>
<div id="B" class="hideAndShow" style="display:none;">B</div>
<div id="C" class="hideAndShow" style="display:none;">C</div>
<div id="D" class="hideAndShow" style="display:none;">D</div>
In such cases where you have similar repetitive code you can use a common technique called "Abstraction". The main idea is the turn the common code into parameters of a single function in your case it would be:
function loadByID(id){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
document.getElementById(id).style.display="block";
}
However this is also still a little bit redundant, for larger menus and displaying multiple links you can do something like
function loadByIDs(ids){
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
document.getElementById(links[i].id).style.display = none;
}
for each(var id in ids){
document.getElementById(id).style.display = block;
}
}
This will work much better when you have too much links and want to display more than one link at a time (so you will need to pass in an array)
Note: If you are using Jquery you can just use .each() function to get rid of the first for loop
Hope this helps!
I think the best practice in your case is to define a general function that work however the number of links with specific class in my example the class is link, take a look at Working Fiddle.
Now your script will work with dynamic links added in div, you have just to add html without touching the js will detect change.
HTML :
<div class="menu">
A
B
C
D
</div>
JS :
load = function(e){
//select all links
var links = document.getElementsByClassName('link');
//Hide all the links
for (i = 0; i < links.length; i++) {
links[i].style.display = "none";
}
//Show clicked link
e.target.style.display = "block";
}
Hope this make sens.
HTML
<body>
<div id="main">
<ul id="nav">
<li>Home</li>
<li>About Us</li>
</ul>
<div id="container">
<div id="wrapper">
<div class="content">
<div id="menu_home">
<h2>Menu 1</h2>
</div>
<div id="menu_about">
<h2>Menu 2</h2>
</div>
</div><!--content-->
</div><!--wrapper-->
</div><!--container-->
</div><!-- main-->
</body>
JS
$(document).ready(function(){
$("#menu_home").slideUp("fast");
$("#menu_about").slideUp("fast");
$("#menu_home").show();
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$(".content div").slideUp("fast");;
$(".content #menu_"+id[1]).slideToggle("fast");
});
});
Here is the example
function loadA()
{
document.getElementById("A").style.visiblity="show";
document.getElementById("B").style.visiblity="hide";
document.getElementById("C").style.visiblity="hide";
document.getElementById("D").style.visiblity="hide";
}
if visibility dont work,just change the visibility keyword with visible and hide with hidden.
and one more thing,u should not write function for each div..what can u do just pass id of a div which u want to show and hide others..see below
function trigger(id)
{
var alldiv={"A","B","C","D"};
for(i=0;i<alldiv.length;i++)
{
if(alldiv[i]==id)
document.getElementById(id).style.visiblity="show";
else
document.getElementById(alldiv[i]).style.visiblity="hide";
}
}

Add Class to Following Element

I had a look out on the interwebs for a jQuery image gallery and couldn't find one that suited what I wanted to do. So I, ended up creating one myself and am trying to figure out how to get the prev and next buttons to work.
<div class="gallery portrait">
<nav>
<div class="close"></div>
<div class="prev"></div>
<div class="next"></div>
</nav>
<div class="cover">
<img src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img src="image.jpg">
</li>
...
</ul>
</div>
I'm also using a bit of jQuery to add a class of .full to the .thumb a element, which makes the thumbnails go fullscreen.
$( ".thumb a" ).click(function() {
$( this ).toggleClass( "full" );
$( "nav" ).addClass( "show" );
});
Now I can't work out this next bit, I need a way when the .prev or .next buttons are clicked for it to remove the class of .full from the current element and add it to the next or previous .thumb a element, depending on which was clicked.
I've got a demo setup here: http://codepen.io/realph/pen/hjvBG
Any help is appreciated, thanks in advance!
P.S. If this turns out well, I plan on releasing it for free. I guess you can't have too many jQuery image galleries, eh?
You can use $.next() and $.prev():
$(".prev").click(function () {
var current = $('.full');
current.prev('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});
$(".next").click(function () {
var current = $('.full');
current.next('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});
I suggest the following additions to your code to handle wrapping around with your next and previous links:
$(".next").click(function (event) {
navigate("next");
return false;
});
$(".prev").click(function (event) {
navigate("prev");
return false;
});
function navigate(operation) {
var $thumbs = $(".thumb"),
$full = $thumbs.find("a.full").closest(".thumb"),
$next;
$thumbs.find('a').removeClass('full');
if (operation == 'prev' && $full.is($thumbs.first()))
$next = $thumbs.last();
else if (operation == 'next' && $full.is($thumbs.last()))
$next = $thumbs.first();
else
$next = $full[operation]();
$next.find('a').click();
}
Here is a forked CodePen.
Something like this will get you started, but what you're wanting to do takes a little time to get just right.
<script type="text/javascript">
var imgSrcs = ['/imgs/this.jpg', '/imgs/will.jpg', '/imgs/work.jpg', '/imgs/just.jpg', '/imgs/fine.jpg'];//img url loaded into an array
var btnPrev = document.getElementById('prev'),
btnNext = document.getElementById('next'),
cover = document.getElementById('cover'),
thumb = document.getElementById('thumb'),
currImgIx = 0;
btnPrev.onclick = function () {
if (currImgIx === 0) { return; };
currImgIx--;
cover.src = imgSrcs[currImg];
thumb.src = imgSrcs[currImgIx];
};
btnNext.onclick = function () {
if (currImgIx === imgSrcs.length - 1) { return; };
currImgIx++;
cover.src = imgSrcs[currImgIx];
thumb.src = imgSrcs[currImgIx];
};
</script>
<div class="gallery portrait">
<nav>
<div class="close">X</div>
<div id="prev" class="prev">Prev</div>
<div id="next" class="next">Next</div>
</nav>
<div class="cover">
<img id="cover" src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img id="thumb" src="image.jpg">
</li>
...
</ul>
</div>

Click function does not work even though the CSS selector does

I have a gallery of thumbnails, all with class .thumb that are added by a php code that a friend wrote. I tried to add a simple click function:
$('.thumb').click(function () {
console.log('test');
});
And it does not log anything. I had tried this before we switched to php as well, and it still didn't work. (At that time the images were imported with jQuery)
Below is the relevant html code:
<div id="navbar">
<img src="images/sig.png">
<ul>
<li id="port"><a>Portfolio</a></li>
<ul id="inner">
<?php
$dir = opendir("images/portfolio");
while ($dosya = readdir($dir)){
if(substr($dosya,-1)!="." and is_dir("images/portfolio/".$dosya)){
if(file_get_contents("images/portfolio/".$dosya."/active.dl") == 'active'){
?>
<li class="galleryActivator" cats="<?=$dosya?>"><?=file_get_contents("images/portfolio/".$dosya."/name.dl")?></li>
<?php }}
}?>
</ul>
<li><li>Events</li></li>
<li>About</li>
</ul>
</div>
<div id="main">
<div id="thumbnails">
</div>
</div>
And the script:
(function(){
$('#inner').hide();
$('#main').hide();
$('#slideshow').hide();
$('#port').click(function(){
$('#inner').slideToggle(200);
console.log('test');
});
$('.galleryActivator').click(function () {
$("#main").hide();
$("#main img").remove();
var category = $(this).attr('cats');
var catSrc = "images/portfolio/" + category + "/files/";
var size = $(this).attr("data-size");
console.log(size);
var $thumbnails = $("#thumbnails");
$thumbnails.load( "albumler.php?adres="+category );
$('#main').fadeIn(200);
});
$('.thumb').click(function () {
console.log('test');
});
})();
it seems you are loading your thumbnails dynamically; you should set your event handler like this:
$(document).on("click", ".thumb", function () {
console.log('test');
});
you dont have anything in your above HTML with a class of thumb
but once you do just add document ready
$(document).ready(function(){
$('.thumb').click(function () {
console.log('test');
});
});

Replace Content with Javascript/Jquery

http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY, fadeOut with speed of 0 is the same as hide()/show(), & jQuery.data() is used to retrieve the data-region.
HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS
.fieldsgame {
display:none;
}
JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
JSFiddle.
=== UPDATE ===
Based on your comment, I found the following difference on the live page:
Match
Game 1
Game 2
Game 3
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.

jQuery thumbnail replace method (Needs solution for adding A tag)

I've got a thumbnail replace solution, I need to add an a tag around an img item and still have the same functionality.
The jQuery
$(".large").click(function () {
var thumbRel = $(this).attr("rel");
$(this).effect("transfer", { to: $(".thumbnail img[rel='" + thumbRel + "']") }, 1000);
});
$(".thumb").click(function () {
$(".thumbnail [class^='thumb']").removeClass("current");
$(this).addClass("current");
$(".large").attr("rel", $(this).attr("rel"));
$(this).effect("transfer", { to: $(".large") }, 1000);
$(".large").animate({ opacity: 1 }, 1000);
$(this).queue(function () {
$(".large").attr("src", $(this).attr("src").replace("-thumb", ""));
$(".large").animate({ opacity: 1 }, 1000);
$(this).dequeue();
});
});
The markup is mixed with Dot Net, but here it is
<div class="product_images">
<div class="mainImage">
<a class="ShowProductImageDlg" href="#" onclick="ProductImagesDlgClientSide.showDialog('#Model.ProductToDisplay.Product.UrlSlug', 'Bottle'); return false;" >
<img class="LargeImage" src="#Model.ProductToDisplay.Product.awsImageUrlLarge" alt="#Model.ProductToDisplay.Product.ProductName" />
</a>
</div>
<strong>Additional Images</strong>
<div class="thumbnail">
<ul>
<li><a href=""><img class="SmallImage Bottle" src="#Model.ProductToDisplay.Product.awsImageUrlSmall"
alt="#Model.ProductToDisplay.Product.ProductName" /></a></li>
<li><a href=""><img class="SmallImage BackLabel" src="#Model.ProductToDisplay.ProductAdditionalImageUrlSmall(awsProductImageType.BackLabel)"
alt="#Model.ProductToDisplay.Product.ProductName" /></a></li>
</ul>
</div>
</div>
The end goal, is to have the entire div that the image is in clickable (which is 90px by 90px) when the image itself is only 80x35.
I want to use the same jQuery.
You can do this like that (see jsfiddle as a proof):
var link = jQuery('<a>', {
'href': 'http://www.google.com/',
'title': 'Dynamically generated link'
});
jQuery('img').wrap(link);
Basically you first create a link (<a> element) and then wrap it around the images selected by the img selector (you can adjust it to your needs).

Categories

Resources