I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?
I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.
Related
I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>
So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!
Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.
Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).
I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?
if ($('.swiper-slide').hasClass('swiper-slide-active')) {
$('.overlay-caption', this).toggleClass('overlay-caption-active');
$('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};
Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.
<div class=“swiper-slide”>
<div class=“caption-box information-00”>
<a class=“caption links”>
Text Text Text Text Text Text
</a>
<div class=“overlay-caption-box”>
</div>
</div>
<div class=“overlay-caption”>
<div class=“project-information”>
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
</div>
Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.
Cheers!
Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.
I have an effect I want to achieve, but I'm having trouble thinking of exactly how I could achieve it. Here are some images that show the progression of the effect I want to achieve: http://imgur.com/a/In6IK
So essentially, I have multiple slides containing text which I want to automatically display one by one. In order to hide the current slide and show the next one, I want an image (which sits to the left of the text) to slide to the right, covering/hiding the text as it goes, and then when it slides back to its original position, the text for the next slide is shown.
So how would I go about achieving this effect?
Here is a raw idea. Maybe you can make use of :after and :before and position them so that they hide the text, making it disappear.
HTML would be something like:
<div class="main">
<div class="over"></div>
<div class="text">This is some text</div>
</div>
And for CSS look in this fiddle http://jsfiddle.net/Zs2MU/
Maybe it will help you in your situation.
UPD Here is updated solution which supports multiline text http://jsfiddle.net/Zs2MU/2/
I am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.
However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.
You can view the page here.
You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.
Their example has each slide within it's own and then the caption inside another div like so:
<div class="slide">
<img src="/images/myimage"/>
<div class="caption"><p>this image is awesome</p></div>
</div>
Without actually trying it, I think you may be missing the slide as well as the child caption classed div's
I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.