Slideshow - link slide to URL only working for last slide - javascript

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Related

Simple img carousel function not working?

So I'm creating a simple image carousel for a mock webpage I'm building.
I'm currently following this tutorial on YouTube. Minute: 7:10 shows the function I'm asking about.
In this tutorial he creates this jquery function to activate the carousel.
$(document).ready(function(){
$(".nextLink").on("click", function(){
var currentActiveImage = $(".image-shown");
var nextActiveImage = currentActiveImage.next();
currentActiveImage.removeClass(".image-shown").addClass(".image-hidden");
nextActiveImage.addClass(".image-shown").removeClass("image-hidden");
});
});
Here's the HTML
<div class="carousel-outer">
<figure class="carousel-inner">
<img class="image-shown" src="images/team/alex_morrales.jpg" alt="">
<img class="image-hidden" src="images/team/david_kim.jpg" alt="">
<img class="image-hidden" src="images/team/jenny_tabers.jpg" alt="">
<img class="image-hidden" src="images/team/joey_barrett.jpg" alt="">
<img class="image-hidden" src="images/team/melinda_lee.jpg" alt="">
<img class="image-hidden" src="images/team/rachel_dotson.jpg" alt="">
</figure>
<div class="img-buttons-box">
<div class="img-buttons">
<a class="previousLink" href="#">Previous</a>
<a class="nextLink" href="#">Next</a>
</div>
</div>
</div>
Here's the CSS
.image-shown {
display: inline-block;
}
.image-hidden {
display: none;
}
I'm under the impression that the above function in itself is enough to have the carousel work well and cycle through the photos seamlessly.
Always displaying the next one in the lineup and hiding the rest.
However, this is obviously not the case as this is what it looks like before and after I hit the "next" button for the first time (it doesn't do anything on subsequent presses).
Before
After
Help understanding why the function, as is, isn't seemingly enough to make the carousel work is greatly appreciated, thank you.
When you reference a class in .removeClass() or .addClass() you dont have to write the dot before the class.
$(document).ready(function(){
$(".nextLink").on("click", function(){
var currentActiveImage = $(".image-shown");
var nextActiveImage = currentActiveImage.next();
currentActiveImage.removeClass("image-shown").addClass("image-hidden");
nextActiveImage.addClass("image-shown").removeClass("image-hidden");
});
});
PS: I saw this by using the devtools; clicked on "Next" and saw how an img got classes with the dot. Just an advice if you want to debug DOM changes quickly.

fadeIn of an element after fading out another one isn't really working

I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible.
So this is the website: http://s448350928.online.de/pumpn/records/index3
The Releases Section there has this html code (simplified):
<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
function hide2014and2016show2015()
{
$("#2014").fadeOut(4000);
}
</script>
<script>
$(document).ready(function(){
$("#2015").hide();// hide it initially
$('#forward2014').click(function(){
$("#2015").delay(4000).fadeIn(4000); });
});
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP (Instrumental)</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Viernacheins EP</h3>
</a>
</div>
</div>
</div>
<div id="2015">
<div class='container3' style="overflow:visible;">
<h2>Alben</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Larmoyanz</h3>
</a>
</div>
</div>
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Mrs. EP</h3>
</a>
</div>
</div>
</div>
</div>
If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D
What I wanted to code is:
When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.
What really happens is: http://i.stack.imgur.com/hxLVB.gif
So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(
UPDATE:
Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:
NOT WORKING FIDDLE (with the transform property in it):
jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)
WORKING FIDDLE:
jsfiddle.net/rant5af9/
You see that the problem is the transform property.
WHY???
I need an alternative. I cannot just remove it, the script will
be readd it every time I scroll.
Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D
INFO: You can find the fullpage.js in the javascript box in both fiddles.
PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.
Please help, fanx! :)
Why the problem happens
As explained by #kosmos in comment:
Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.
Solution
jQuery fadeOut function accepts a complete callback function (source).
This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.
html:
<div id="forward2014" style="display:inline-block">
javascript:
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
demo in this snippet
(click the >> as forward button)
$(document).ready(function(){
$("#2015").hide();
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
});
<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Further remarks:
You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.
i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this
$('#whatever').fadeOut('slow', function() {
$('#whatever').delay(4000).fadeIn('slow');
});
See This

Removing unwanted space between images

My problem is in my navigation bar, which can be found here: http://grupocoral.netai.net/
There is a space between those images and i want to remove it. How can I do it?
Javascript Code:
function swap(element, image) {
element.src = image;
}
And the html code:
<div id="navbar"><img src="images/homeover.png">
<img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');">
<img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');">
<img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');">
<img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');">
</div>
Just in case, navbar CSS code:
#navbar{
width: 1280px;
margin: 0 auto;
height: 40px;
horizontal-align: center;
padding:inherit;
}
By the way, do you know any other way of making a menu like that without JS?
Thanks,
langel
It's due to the white space in your code. Remove the white space between your links and that should clear it up.
In other words, change your HTML block of navigation to:
<div id="navbar"><img src="images/homeover.png"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"> </div>
This keeps my code clean and it removes the whitespaces in the code.
<a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a>
Inline elements like these are whitespace dependent, which means that browsers will render some whitespace between them.
to counter this you can either run all your elements together on one line
linklink
or block the closing and opening tags
<a href="#">
link</a><a href="#">
</a>
<a href="#">
link</a><a href="#">
</a>
:)
to remove the space just remove the break line between the anchor ex:
and i suggest to use the css without the js :
<div id="navbar">
<a class="home" href="#"></a>....
</div>
CSS :
#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}
You do have an alternative option to your javascript image swap. You can use the CSS :hover in combination with background-image.
dabblet example:
http://dabblet.com/gist/2253898
CSS:
#Membros{
background-image:url('http://grupocoral.netai.net/images/membros.png');
width:240px;
height:40px;
}
#Membros:hover {
background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}
HTML
<div id="Membros"></div>
I hope this helps!
By the way, do you know any other way of making a menu like that without JS?
Yes, here is an example, I've used one of your background image link with 'Home' on it, you should use only one image without any text label on it.
you can also instead of using javascript to change the image source, use :hover css pseudo-class to change the background, it will require you to change the way is made but it will make this menu work even when JS is disabled
css_pseudo_classes

.hover fade image out, fade new image in. On exit return to original image

I have my company logo appearing in the footer of my site, when the user hovers over the footer I want the image logo.png to fade out, then biglogo.png to fade in - in its place.
When the user moves the cursor away from #footer I want logo.png to fade back in.
<div id="footer">
<div id="logowrap">
<img src="images/logo.png" alt="" class="active" />
<img src="images/biglogo.png" alt="" />
</div>
</div>
I've tried so many things but dont seem to be able to get the logic right, I end up with flashing images, images that fadeout when I want them to fade in.
Any help greatfully received (I'm pulling my hair out)
Try this:
$(function() {
$("#logowrap").hover(function() {
$("#logowrap img:first").stop().fadeOut("fast",function() {
$("#logowrap img:last").stop().fadeIn("fast");
});
}, function() {
$("#logowrap img:last").stop().fadeOut("fast",function() {
$("#logowrap img:first").stop().fadeIn("fast");
});
});
It fades the first image and when finished starts fading the other back in, then does the reverse on hover out. You can use $(this) a bit more, but this looks cleaner for this specific case I think.
<div id="footer">
<div id="logowrap">
<img src="images/logo.png" alt="" class="active" />
<img src="images/biglogo.png" alt="active_big" />
</div>
</div>
$(document).ready(function(){
$('#active').bind('mouseout',function(){
$('#active').fadeOut('slow');
$('#active').attr('src','images/logo.png');
)};
$('#active_big').bind('mouseover',function(){
$('#active').fadeIn('slow');
$('#active_big').attr('src','images/biglogo.png');
)};
});
Should work fine for you

Can you control the order in which images (hidden vs visible) on a web page are loaded?

If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>
The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.
As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/
Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.
If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Categories