JQuery Carousel - shifting UL not LIs - javascript

I am using the JQuery Carousel plugin from here: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm
I have set it up as such:
<script type="text/javascript">
$(function(){
$(".carousel").carousel();
});
</script>
<div id="carouselholder">
<div class="carousel">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
</div>
</div><!--CAROUSELHOLDER-->
But when I hit the Next button it seems to shift the whole ul not the li.
Does anyone know how to fix this? (or maybe theres a better plugin?)
Below: Screen shot from Element Inspector:

The documentation on this plugin seems a bit slim. It appears that some additional styling is needed to make it work, but none of the examples illustrate this point.
Your setup is correct and in fact it will move the entire UL grouping, only showing the currently selected li. Using your simple code above, all I did was add the following CSS to make it work:
li {
float: left;
}
Just add a little more styling to your container to constrain the view and you should be good to go.

I think that is how it is meant to work
if you put a width on the carousel-wrap, so it only shows one image, the ul shifts position to show the next one
The li tags dont move
If you want to try another plugin, i recommend this one
http://caroufredsel.dev7studios.com/index.php .

Thanks for the help all, but I found that a modified version the Cycle plugin works a lot better:
http://jquery.malsup.com/cycle/nowrap.html

Related

Image slider not loading properly

This is the html for my website. I would like to add this image slider:. I have one problem, for some reason all I get is 4 bullet point and a error img picture next to it. Could you look at my html and see what you could do to help.
-Thanks
http://jsfiddle.net/lasquish/hL7vLcd5/
<div class="container">
<ul class="slider">
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
</ul>
</div>
This is the Script:
<script src="js/jquery.bxslider.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
Since you have wrapped slide content with .slider class you need to do following changes
$(document).ready(function(){
$('.slider').bxSlider();
});
Call bxslider.min.js after jQuery library
Also you have call 2 different version of jQuery library. this will make conflict.
You need to add below css to remove bullet
ul
{
list-style-type: none;
}
Need to use correct image path or you can use full image "http://fiddle.jshell.net/img/logo.png"...
As you have not shared all required file here ..so we unable to test at our end. Please share js library file which you have include here if problem no solve.

Display title attribute as string in another HTML element

Been trying everything all day to get this to work with no luck.
I want to use the title attribute from an li element as a string inside of a completely separate span element.
Here is my code:
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<div id="slider">
<ul>
<li class="slide" title="Careers">
<img src="large-image-1.jpg" alt="Large Image 1" /> </li>
</ul>
</div>
<div id="slide-thumbs">
<ul>
<li><img src="thumb-image-1.jpg" alt="Thumbnail for Large Image 1" />
<span class="thumb-caption"><!-- need title attribute above reading "Careers" to go here --></span>
</ul>
</div>
I feel like I'm missing something easy here. I can only use Javascript to do this with the script I'm working with. PHP is not an option. Any help would be very much appreciated.
Thank you,
Justin.
var title = $('.slide').attr('title');
$('span').html(title);
The JS should work fine, but something to consider is you could do this with pure CSS and avoid the extra markup. Just display the title attribute using a pseudo-element and position it where you like:
.slide:before {
content: attr(title);
position: absolute;
display: block;
}
Since the title is already displaying on the page and you're not generating anything else in addition to it, no reason for the extra element
If there is more than one slide, better use:
$('.thumb-caption').each(function(i) {
$(this).html($('.slide').eq(i).attr('title'));
});

Fancybox 2.0.1 inline content not working

I followed the tutorial on the site to get inline content working. Even checked their source and made changes to my own site.
Here is the site: http://miuzer.com/new/
Check the links in the upper right. About works, but register and login don't as their content is inline. What is the issue here?
I find a lot of js libraries are buggy, overcomplicated and poorly documented, fancybox is one of the worse.
Delete this line:
<a id="popup_img" style="display:none" href="img/popup_img.jpg"><img src="img/popup_img.jpg" alt="" /></a>
Alter about/register/login part like this:
<div class="header-content">
<ul>
<li>About</li>
<li>Register</li>
<li>Login</li>
</ul>
Delete these lines from interface.js
$('#popup_img').fancybox();
$('#register-dialog').fancybox({'type':'inline'});
$('#login-dialog').fancybox({'type':'inline'});
// $('#popup_img').click();
and add this line instead:
$('.header-content ul a').fancybox();
By the way, it's a very well documented and well written plugin and I can't say same thing for your code...

Align jQuery List

I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.

How to make javascript load faster?

Right now, we have a slideshow of images that uses javascript. However, when the page is still loading, the images would be briefly shown in a normal listed style (with bullets) before the javascript gets read and executed. Problem is, we don't want visitors to see the "naked" image list, even just briefly (sometimes it would last 2-3 seconds). We want them to immediately see just one image (not a list) that morphs into another (what the js does).
This is the html code for the slideshow:
<div class="slideshow">
<ul>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
</ul>
</div>
This is the slideshow that we used:
http://www.littlewebthings.com/projects/blinds/
and this is the JS file:
http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js
I am thinking that this may be a cache problem as the demo slideshow above only showed the "naked" image list once. Once it is refreshed/re-visited, it no longer shows (or still shows but a lot faster than the first time that it's almost unnoticable). Ours, on the other hand, keeps on re-reading the javascript as if it's always the first time (if you know what I mean).
hide all list with css and only show the first one image. So user wont see all the list apart from first image.
Although this doesn't directly answer the question of getting it to load instantly, one option would be to start with your div hidden with <div class="slideshow" id="myId" style="visibility: hidden">, and then as soon as you know your JS has loaded, show it (e.g. using jQuery):
$( "#myId" ).css( "visibility", "visible" );
Try edit the ul style this way:
ul{
list-style:none;
}
ul li{
position:absolute;
}
The list wrapper must have a fixed height ;)
Hope it helps

Categories