The problem:
I have a jQuery var setup like so:
var count = $("#gallery li:visible").length;
alert(count);
This finds all the gallery li's that are currently visible on the page. The number changes when the pagination is triggered, as people can select categories.
I want to be able to use this count to then look at the 3rd item of every count and addClass of end_item (as i have 3 in a row)
My HTML:
<ul id="gallery">
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
</ul>
Currently trying:
$('#gallery li').each( function(count) {
if( count % 3 != 2 )
return
$(this).addClass('end')
})
I am not going to have exactly 3 on the page, it could be anything from 2 - 12, so i need to find EVERY 3rd item currently visible
EDIT:
My code seems to work... however only when the page first loads. If i use a filter item on my gallery, the code is counting the hidden items, even though i am re-calling the jQuery once a filter is clicked.
Give this a shot:
FIDDLE
$('#gallery li:visible').each(function(i) {
if (i % 3 == 2) $(this).addClass('end_item');
});
When you load more, just be sure to do this:
$('.end_item').removeClass('end_item');
//then execute code from above
I missed it but could be useful (in future)
$('#gallery li:visible').filter(function(i){ return i % 3 == 2; }).addClass('end');
DEMO.
$('#gallery li:visible').each( function(count) {
if( (count + 1) % 3 == 0 ) {
$(this).addClass('end');
}
});
http://jsfiddle.net/mGZmy/1/
Related
I have 4 side panels that overlay each other when I click on their corresponding buttons. How can I hide one when another opens?
This is the menu that triggers the panels:
<div id="resources-menu-main">
<ul>
<li id="toc-main-button"><img src="gfx/toc.png" width="50" alt="Table of Contents"></li>
<li id="footnotes-main-button"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></li>
<li id="references-main-button"><img src="gfx/references.png" width="50" alt="References"></li>
<li id="images-main-button"><img src="gfx/images.png" width="50" alt="Images"></li>
<li id="information-main-button"><img src="gfx/info.png" width="50" alt="Information"></li>
</ul>
</div>
This is one of the side panels (it has another menu within to facilitate navigation):
<div id="footnotes-section">
<
<hr id="line">
<h3>Resources<br/><br/></h3>
<div id="resources-menu-panel">
<ul>
<li id="footnotes-panel-button"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></li>
<li id="references-panel-button"><img src="gfx/references.png" width="50" alt="References"></li>
<li id="images-panel-button"><img src="gfx/images.png" width="50" alt="Images"></li>
<li id="information-panel-button"><img src="gfx/info.png" width="50" alt="Information"></li>
</ul>
</div>
<hr id="line">
<details open>
<summary><h4><img src="gfx/footnotes.png" width="50" alt="Footnotes"><br/>Footnotes</h4></summary>
[content]
<h4>↑ Volver</h4>
</details>
</div>
This is the js function of the corresponding side panel:
function showFootnotesPanel() {
var elem = document.getElementById("footnotes-section");
if (elem.classList) {
console.log("classList supported");
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
Thank you!
Okay, I'm still not exactly sure what you want, but I broke it down to a basic layout to make it simpler. Here's the fiddle for it. http://jsfiddle.net/wvoa69r5/1/
Basically you show the div you want and then hide the previously shown div like this:
$('#link1').click(function() {
var left = $('#left-div1');
var leftShow = $('.left-div.show');
left.addClass('show');
leftShow.removeClass('show');
});
I've got a set of elements where when I click on a specific button, I want to animate one element at a time using jquery.
This is my html markup.
<ul class="image-wrapper">
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="overlay"></div>
<div class="menu"></div>
This is my jquery code for animate each element.
$('.left-arrow').click(function(){
$('.image').first().animate({
width:'0px'
},1000);
})
But the problem is after the first animation, I cannot continue with the rest! how can I loop through the elements to slide in each element.
you need to keep and index
var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
$imgs.eq(index ).animate({
width:'0px'
},1000);
index = index == 0 ? $imgs.length - 1 : index - 1 ;
})
Demo: Fiddle
Try jquery's .each(),
$('.left-arrow').click(function(){
$('.image').each(function(){
$(this).animate({
width:'0px'
},1000);
})
I've got an image viewer that combines a thumbnail/large image block that works great...
looks like this:
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<ul class="holder">
<li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li>
<li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li>
<li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li>
<li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li>
<li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li>
</ul>
<div class="clear"></div>
</div>
<script>
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
</script>
However when I try to combine this with a carousel (the simplest one I found here - http://www.flintstudio.biz/stuff/sliders/1.html )
It stops working...
the code looks like this
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<a class="button prev" ><img src="images/arrow_left.png"/></a>
<a class="button next" ><img src="images/arrow_right.png"/></a>
<ul class="holder">
<li class="slide first"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
<div class="clear"></div>
</div>
<script>
$( window ).load(function(){
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
$.preloadImages( images, init );
function init() {
$( '#gallery-scroller' ).imgSlider( images );
}
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
});
</script>
from a concept standpoint the only difference is that the list is populated after the window loads -
I've tried changing
.delegate('img','click', function(){
to
.on( 'click', 'img', finction(){
but that doesn't help..
OH - one important point - I changed one line in the carousel.js - so it's not doing a background-image css change, but adding an image...
so I changed this (line 37)
$( e ).find( '.holder > li' ).eq( i ).css( 'background', 'url('+images[i]+') no-repeat' );
to
$( e ).find( '.holder > li' ).eq( i ).html( '<img class="thumb" src="' + images[i] + '" />' );
What am I missing...???
jsfiddle of the simple thumbnail viewer... http://jsfiddle.net/cBpvZ/
jsfiddle of the carousel version... http://jsfiddle.net/ZJzLd/
I think you are binding the events on wrong DOM object, so instead of IMG it should be LI. You can inspect the HTML using firebug and can see that there is no IMG tag inside UL.holder. Try the following code.
$('.holder').delegate('li','click', function(){
var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
$('#largeImage').attr( 'src',imgSrc);
});
Ideally I should have used the RegExp to replace the string, however this works.
thx Mahesh
forest thru the trees... I couldn't see it because I'd fiddled with it so much... the missing reference to data-large was indeed the issue.
the solution was (defined by me) to have TWO arrays - one for thumbs and one for large..(I could take the path of adding some suffix or prefix to the image names and keep them correlated that way - but I choose not to - and therefor want the flexibility to name things whatever... and this needs two arrays)
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg'];
$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>');
$.preloadImages( images, init );
function init() {
$( '#gallery-loader' ).remove();
$( '#gallery-scroller' ).imgSlider( images, large );
}
of course this mean altering the carousel.js to handle the additional passed array - no prob there...
works like a charm. I can now populate this with data, and place the carousel anywhere I need, and the large image viewer where I need it... bravo - thanks for the assist.
This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.
Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});
Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});
Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.