I am trying to make a slideshow with the jQuery plugin bxSlider.
Ultimately what I am trying to achieve is this: http://i.imgur.com/yae1Gvy.jpg
Although I just found that image online. I'm not too worried about the scroll bar.
I just want 2 of the 3 images to go off the page. bxSlider has an option to set the width of the slides (slideWidth) and I want that width to be the width of the image: 680px.
The container of the 3 slides however will not fit all 3 slides at their normal width so it maxes each slide out at $(window).width() / 3 and then applies that as an inline style so i cant override it. If i change the value to a smaller one then it works fine and fits nicely into the container but i need it to go out of the viewport.
Essentially this is what I would like to achieve and im 90% there apart from the sizing issue: http://www.aucklanddj.co.nz/weddings
The website linked above is using the same jQuery plugin.
Heres my code:
HTML:
<ul class="slide-container">
<li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
<li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
<li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>
Javascript:
$(document).ready(function(){
$('.slide-container').bxSlider({
auto: true,
useCSS: false,
pager: false,
controls: false,
autoHover: true,
minSlides: 3,
maxSlides: 3,
slideWidth: 680,
slideMargin: 0,
preloadImages:"visible",
moveSlides: 1,
captions: true,
responsive: false
});
});
Am I missing something where there is an option for max width or something? I must have looked over the options page for a good few hours and not found anything...also googled it a lot but not quite sure if I'm asking the right questions.
Any help would be greatly appreciated.
OK so it turns out my problem was with the containing element.
Basically I had to add 2 containing divs. My HTML now looks like this:
<div class="slider-outer-container">
<div class="bx-slide-container">
<ul class="bx-slides">
<li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
<li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
<li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>
</div>
</div>
and my css for those containers:
.slider-outer-container{
overflow:hidden;
}
.bx-slide-container{
width:3120px;
margin-left:-1040px;
margin-right:-1040px;
}
If you need to center everything get rid of the width in the first container.
The Javascript is exactly the same as in the original question.
Clearly my div naming skills could do with some improvement but that solved the problem for me!
Hope this helps anyone else looking to do the same thing.
Related
Having some trouble here styling my bxslider image slider. It also does not appear that it's taking whatever styles I've tried to give it, in the first place - but theres also the "prev" and "next" text links that i dont want either.
any chance someone can help trouble shoot where I need to make changes to style this to look more like this! --> http://danielmdesigns.com/windermere/images/sliderexample.png
Let me know if you need something else, but to see this live, please visit http://www.danielmdesigns.com/windermere/index.html and my HTML CSS and JS are below as well;
HTML
<ul class="bxslider">
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
</ul>
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
background-size:cover;
position:relative;
top:95px;
}
and my JS above the end body tag;
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
i really just need this to be full width with only the pager dots showing, positioned on top of my slider... any and all help is appreciated.
Make sure to declare your custom CSS after you import the default .bxslider css file. That way you can override the defaults.
I have a div (.bx-caption) in which the text changes based on the title attribute of a selected image in a slider.
I'm trying to copy the text from this div to another div, and always have them be matching.
I'm using:
$(document).ready(function(){
$('.screenTitle').html($(".bx-caption").html());
});
This code works to match the text when the site loads, but whenever I change images in the slider and .bx-caption switches to a new title, .screenTitle doesn't pick up on it and stays the same.
What can I do to ensure that .screenTitle always matches .bx-caption?
Thanks in advance to anyone who helps out.
Update: the HTML looks like this:
<ul class="bxslider">
<li><img src="images/1.png" title="Funky Roots" /></li>
<li><img src="images/2.png" title="Little Toots" /></li>
<li><img src="images/3.png" title="Epic Loots" /></li>
</ul>
</div>
<div class="outside">
<div class="screenTitle"></div>
<div id="slider-prev"></div> <div id="slider-next"></div>
</div>
Here is a JSFiddle trying to attempt the above:
jsfiddle.net/uwA3Q/2/
Document.ready fires only once when you load the page.
who ever changing the slider put your code over there
$('.screenTitle').html($(".bx-caption").html());
for example if you have a click handler that changes the slide
$('#mySlide').on('click', function(){
//do the changing of the slide
//also update the title here
$('.screenTitle').html($(".bx-caption").html());
})
If you are using bxslider add onSlideAfter callback to change screen title:
$('.bxslider').bxSlider({
// ......
onSlideAfter: function($slideElement) {
// get .bx-caption element of current slide
$('.screenTitle').html($slideElement.find('.bx-caption').html());
}
});
http://jsfiddle.net/DQadF/2/
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
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
So there are a few things I want to do. I have a section of HTML that I would like to be displayed on the page by default (i.e. the first time it loads).
<div class="viewport">
<ul class="overview">
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
<li><img src="images/5.png" /></li>
<li><img src="images/6.png" /></li>
<li><img src="images/7.png" /></li>
</ul>
</div>
However, upon clicking an icon I would like for this section to be reloaded as a snippet of javascript is updated.
The code for the icon is:
<img src="images/2.png" id="icon#2"> |
<img src="images/3.png" id="icon#3"> |
<img src="images/4.png" id="icon#4"> |
The JS snippet that is updated is:
var win_width = $(window).width();
var num_of_images = 2; // This should be changed to 3, when 3 is clicked, and 4 when 4 is clicked, etc.
So it should reload the 'viewport' div on the page only...not the entire page.
Thoughts?
$(function () {
var num_of_images = 2,
showAndHide;
$("img[id^=icon]").bind("click", function () {
num_of_images = parseInt(this.id.replace("icon#", ''), 10);
showAndHide(num_of_images);
});
(showAndHide = function (n) {
$("ul.overview").hide() // hide this while we "do work"
.children() // get children
.show() // show all children
.filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
.hide() // hide them
.end()
.end()
.show(); // show the parent list
})(num_of_images)
});
This is a "pending" solution. I have not tested this and I would be surprised if it works.
EDIT: Alright, I tested and fixed a few things and this seems to work.
Note that I attached a click handler to those img elements. So you don't need those anchor tags if you don't want them.
IF you are looking to reload just a portion of the page with HTML content (no added JavaScript) then you could use .load().
$('div#content').load('morecontent.php');
You want $('.viewport').load('/url') to replace the viewport' contents with the new chunk of HTML return from the server from /url. You call that load function once when the page loads, and again any time you want to replace the contents of viewport. You might want to do some include type magic in whatever template language you're using to make it so that you can skip the initial load and render the initial page in one request instead of 2. You trigger the load function in a change event or other kind of event on your page.