I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.
Related
I have some questions about jQuery animations.
But first, This is what I have currently. http://jsfiddle.net/ssmm0714/00vkoopn/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
I would like the green div to slide with bouncing effect (like easeOutBounce) and push the yellow div out until only the green div's arrow is shown, and the contents of the green div will appear.
(It's like a sliding card effect?)
Currently, I made it so that the arrow spins on click.
Could someone help me with coming up with the desired effect? I tried doing a slide on both, but I do not know how to stop it when the blue div hits the arrow.
Also, as a side question, is it a good practice to put all widths of each divs in percentage form? I did this because this is going to be a mobile web app, and wanted to make it responsive.
Anyways, for reference,
This is the mock up of what I want it to look like after.
http://jsfiddle.net/ssmm0714/9q04nz0d/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
<span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
To add the bouncing effect you will need the jquery-ui lib.
Next thing - you want both the yellow div and the green div to have the same effect (for the hide and show) and the effect should work the same time.
$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');
Check out this fiddle: http://jsfiddle.net/w84btwsf/1/
Note that I added some workaround to handle small screens and problems with percentages (you can see it in the top of the js part).
Regarding your question about percentages - yes, this is indeed a good practice. You can also use one the the many css-frameworks that helps with developing responsive layouts (bootstrap is one of them).
I have created script which dynamically change the product image on click event but i need to add zooming feature on Big Image when mouse move on big Image.
HTML code
<ul class="thumbelina" style="top: -220px;">
<li style="display: block;">
<img class="showBigImage" src="/Chrysanthemum-69x52.jpg" data-fullurl="/Chrysanthemum.jpg">
</li>
<li style="display: block;">
<img class="showBigImage" src="/Lighthouse-69x52.jpg" data-fullurl="/Lighthouse.jpg">
</li>
<li style="display: block;">
<img class="showBigImage" src="/Penguins-69x52.jpg" data-fullurl="/Penguins.jpg">
</li>
</ul>
<div>
<img class="bigImage" src="/Penguins.jpg" />
</div>
JavaScript
$(".showBigImage").click(function(){
var FullImageUrl = $(this).data("fullurl");
$(".bigImage").attr("src", FullImageUrl);
});
onfocus -> animate to new height and width,
is this what you want to reach? i could not give a better answer because the question was a little unclear to me. if you want a better answer please expand your question for me
I am developing a mobile app using jquery mobile. I am looking to implement a "tips" section. A tip will be visible on the screen, and with a side swipe, I would like to view another tip.
I was under the impression JQM would have a simple carousel type widget... that can be loaded with html content. That does not seem to be the case.
P.S. I am not looking for an image slider specifically, I want to slide and randomize a carousel that can be loaded with html elements (text).
Anyone have some ideas on what plays well with jquery mobile for mobile apps? (Cordova)
I've used Flex-slider and served me quite well.
Working Demo
Product link
Initialization:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
Markup
<!-- slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="slides/1.jpg" alt="slide">
<p class="flex-caption">Awesomeness</p>
</li>
<li>
<img src="slides/2.jpg" alt="slide">
<p class="flex-caption"> «Fantastic »</p>
</li>
<li>
<img src="slides/3.jpg" alt="slide">
<p class="flex-caption"> « Wow »</p>
</li>
</ul>
</div>
</div>
I have a simple bootstrap grid defined: jsFiddle
The problem is in bootstrap, we define grid like
<div class="row">
<div class="col-md-4">
...
But in flexslider2 we need to wrap into li, e.g.
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
But I want to retain to the use of bootstrap grid as it is responsive and position more easy to control. So, it is possible to remain my grid but to apply flexslide onto it?
I.e. in the flddle, I want 4 & 5 to be hidden at the beginning.
I don't know if this is what you are after, but actually FlexSlider has a "selector" option that allows you to wrap your slides into any element you want:
jsFiddle
$('.flexslider').flexslider({
selector: ".slides > div.col-md-4"
});
Anyway, maybe Bootstrap styles will interfere with Flexslider (because Flexslider sets the width of the slides when it loads), so not sure if this is a good idea. Probably it's easier to define specific styles for the slides.
I don't see the problem you are encountering, but i have updated your jsfiddle.
You should place the whole flexslider into the column:
<div class="row">
<div class="col-md-4">
<div class="flexslider">
<ul class="slides">
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
</div>
</div>
</div>
I've been implementing the code for the flex slider which allows links/buttons outside of the flex slider to target specific slides with rel tags as provided by LJ902 here:
jQuery FlexSlider hide Slider but retain visibility of Manual Controls
Now I'm curious how I would be able to change the css state of the targeting link/button (giving it a different colored background to indicate it's active state), when the flex slider is positioned within a section of slides.
So for instance in the example below, when the slider at a state between the images images/section2-Image01.jpg thru images/section2-Image03, the css state of slide-thumb link for Section 2 is changed , for the slides in section 3 the css state of slide-thumb link for Section 3 is changed and the styling for section 2 goes back to it's previous state. In essence creating tab like functionality that flows over when the users slides/clicks though into the next section
<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/section1-Image01.jpg" />
</li>
<li>
<img src="images/section1-Image02.jpg" />
</li>
<li>
<img src="images/section1-Image03.jpg" />
</li>
<li>
<img src="images/section2-Image01.jpg" />
</li>
<li>
<img src="images/section2-Image02.jpg" />
</li>
<li>
<img src="images/section2-Image03.jpg" />
</li>
<li>
<img src="images/section3-Image01.jpg" />
</li>
<li>
<img src="images/section3-Image02.jpg" />
</li>
<li>
<img src="images/section3-Image03.jpg" />
</li>
</ul>
</div>
Could anyone help me out with this? My mediocre development skills have been stumped by this over the last day or so.Thanks!