I have HTML that looks like this.
<div class='parallax'>
<div class='slider'>
<img src='ps1.jpg' alt=''>
<img src='ps2.jpg' alt=''>
<img src='ps3.jpg' alt=''>
<img src='ps4.jpg' alt=''>
<button id='slider-previous'>
</button>
<button id='slider-next'>
</button>
</div>
</div>
Its for a jQuery slider that I am trying to make. The javascript is such that I don't have change it no matter how many images I add to the <div class='slider'>. I need to pre-load these images in a similar way. Whatever solution I could find had one of two problems.
Either it pre-loaded all the images on the webpage, including those outside of <div class='slider'>, or the links of the images had to be customly added to the code.
I looked into lazy-loading as an alternative (I don't need it as opposed to pre-loading) but the solutions I could find involved adding width and height attributes to the images. My div and the images have the following CSS which is absolutely essential for my slider.
.slider, .slider img {
width:100%;
height:auto;
margin:0;
padding:0;
}
I am looking for something that is somewhat like this.
$(function() {
$( '.slider' ).children() ..........
//OR
$( '.slider > img' ) ..........
});
Can anyone help?
Related
I'm having difficulties with DIV tags again. I have managed to make it so that the users screen into 3 columns. But I'm now trying to add an individual background to each div. But the style="background:blue;" or style="background-color:blue;" don't seem to work.
Any help would be appreciated :)
http://prntscr.com/2kde62 <-- what I wanted it to look like(I used an Image for the background)
http://prntscr.com/2kdedk <-- what it look like even with the style="background:blue;"
Code Below:
<div id='leftDiv' style="float:left; margin:0; width:33%;" align="center">
<img style="position:absolute; top:160; left:170;" onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left; margin:0; width:33%;" align="left">
<img style="position:absolute; top:200; left:650;" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" width="96" height="96"> <!-- Crazy Cat Lady image -->
<img style="position:absolute; top:300; left:650;" onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96"> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="position:absolute; left:1200; color:red; font-size:20;"> PLACEHOLDER </p>
</div>
It seems that all your div have no height attribute. Usually, the div wraps its children blocks, i.e. the img in your situation. However, you have set the img position:absolute, so the parent div cannot get height correctly.
Have you tried adding the:
{background-color:#b0c4de;}
to the CSS of that layout? Make your 'rightDiv' in CSS# and you can place in the code above, it should load.
Try adding
Overflow:hidden
to all three columns or if the height is fixed, add
height:xyzpx
to all three div's.
The div-boxes have no height due to placing the images absolute. Give them 100% height and you can style them or place the images centered and not absolute.
Here's a working sample for your case. The position absolute on the images are messing it up.
<div id='leftDiv' style="float:left;margin:0; width:33%;background:yellow ;" align="center">
<img onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left;margin:0; width:33%;background:red;" align="left">
<img style="width:96;height:96;margin-top:200px" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" /> <!-- Crazy Cat Lady image -->
<img onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96" /> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="color:red; font-size:20;"> PLACEHOLDER </p>
</div>
You should be able to figure out the height of the images yourself. But stop using absolute on all elements. Adding a height to the divs can also fix your issue.
I am using a JQuery scroll plug in which scrolls images in a div, sort of like a marquee.
I am trying to achieve the same thing, however instead of img tags I would like to scroll div tags.
Scroller
At present this is the mark-up
<div id="contentscroller" style="clear:both;">
<div id='left' class="logo-carousel">
<div class="logo-test"></div>
<img src='/images/lve.png' />
<img src='/images/friendslife.png' />
<img src='/images/aviva.png' />
<img src='/images/bright-grey.png'/>
<img src='/images/sagicor.png'/>
<img src='/images/zurich.png'/>
<img src='/images/legal-general.png'/>
<img src='/images/groupama.png'/>
<img src='/images/fortress.png'/>
</div>
</div>
This is the JS
<script>
$(
function () {
$("#left").imageScroller({ loading: 'Wait please...' });
$("#right").imageScroller({ speed: '4000', direction: 'right' });
$("#top").imageScroller({ direction: 'top' });
$("#bottom").imageScroller({ speed: '3500', direction: 'bottom' });
}
)
</script>
I need to achieve the same thing, however simply using div elements with a background image. The result will be exactly the same however instead of images, I would use empty divs with the image as the background, to avoid HTTP requests and to speed up the site performance.
I have tried replacing the images with divs, however it doesn't work because the JS is specificly targeting img tags inside the contentscroller div.
Modifying the original library is not the best answer, but it's what I want to suggest because the library simply looks for images and NOT divs. Take a look at some of its source:
$.each($this.children( ":not(div)" ), function() ...
This is simple, the library isn't looking for divs... What's the work around going to be? Create your own library based on their ideas.
I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...
I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.
Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"
Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}
I have been trying to figure this out for a while and everything I try fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I need the images to resize with it and have no spacing in between. I need a CSS solution that works, I know I can hack it with JS but thats not what I am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/3/ of the whole issue with expected output.
UPDATE
Just a bit more about the implementation. The container div is actually a toolbar with a resize handle. So the container is the only element I can apply the new height on.
Can you do this
$("#resize").click(function() {
$('.container').height("20px");
$('.container .icon').width("20px");
});
This appears to be triggering some funny browser bugs - it works fine essentially in both Firefox and Chrome, but both screw up on the element resize in different ways. In IE10 your sample doesn't run at all.
However, for the intended result you shouldn't be using animate at all in these modern CSS3 days, just use CSS transitions instead, like this example Fiddle solving your case to work in all current browsers.
Try switching your CSS for the image size
width: 100%;
height: auto;
i don't think heights and percentages behave well in most browsers
This is generally how you can define the size for a "responsive" image... whereas the width will always fit the size of the container, and the height will follow suit automagically.
edit your code so that the animation scales by width rather than by height. see if that works.
Try adding to the dynamically changed widths
clear:right;
this will refresh the container
heres a link
http://www.w3schools.com/cssref/pr_class_clear.aspenter link description here
If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>
The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.
As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/
Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.
If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS