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
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.
When I insert an image that does not exist, eg https://www.google.es/images/srpr/logo11wz.png bxslider is loading infinitely without ever reaching load.
This is my js:
$('.lstsl').bxSlider({slideWidth: 120,minSlides: 2,maxSlides: 9,slideMargin: 15,preloadImages:'visible',onSliderLoad: function(){ $(".lstsl").show(); }});
And this my html
<ul class="lstsl" style="display:none">
<li><img src="http://games.mochiads.com/c/g/spooky-jumps/_thumb_100x100.png" width="270" height="270" alt="My title" />My title</li>
<li><img src="http://games.mochiads.com/c/g/spooky-jumps/_thumb_100x100b.png" width="270" height="270" alt="My title" />My title</li>
</ul>
Is there any solution for the bxslider load even if an image is not found?
Thanks.
I'd consider this a bug in the plugin, that or a missing feature. all you need to do is modify one line so that on error, it will continue rather than just sitting there waiting for a load event that will never happen.
modify this line: https://github.com/wandoledzep/bxslider-4/blob/master/jquery.bxslider.js#L275 to
$(this).one('load error', function() {
Go to bxslider>jquery.bxslider.js:
Find this line...
$(this).one('load', function() {
and replace it with
$(this).one('load error', function() {
so that in the case of an error, the slides/images will load anyway.
This line is generally on Line 279 (Current Version 1.5.2)
I hope this is a bit clearer for anyone that needs it - (previous answers contain 404 links which are useless now to people with this problem)
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
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.