I'm trying to create a slideshow (of images) which I've done (by coping an example and changing it slightly, but I'm trying to fit the image size so that there is no option of scrolling. I tried putting it in a div, but this did not work (undoubtably due to my incompetence). I have looked up lots on here, and found several cases of people asking the same/similar questions (e.g How to resize an image to fit in the browser window?), however I have been unable to apply it. Currently when I view this, the page size is the size of the largest image (when the image is larger than the page.)
Many thanks for your help.
Here is where I'm currently at:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: "100%"; width:auto }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow"; style= height: "100%"; width:"auto">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
http://jsfiddle.net/LsNV7/6
.slideshow > img {width: 100%;}
Related
I can't narrow down my problem with a simple logo parade. I'm working on this at promasterautomotive.com so you can see the context of the problem. The logo parade is at the very bottom, the faded logos.
I opened the console in Chrome (ctrl+shift+j) but I'm not seeing any errors.
Here is my javascript. I pulled it directly from an example.
$(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
Here's my HTML. Again, modified from an example. Once I get it working I'll tailor it as necessary.
<div id="logoParade">
<img src="images/logos/wiseco.png" class="logos">
<img src="images/logos/bullydog.png" class="logos">
<img src="images/logos/vortek.png" class="logos">
<img src="images/logos/sinister.png" class="logos">
<img src="images/logos/schaeffers.png" class="logos">
<img src="images/logos/arp.png" class="logos">
<img src="images/logos/bpd.png" class="logos">
<img src="images/logos/sct.png" class="logos">
</div>
Anyone else see something that I'm overlooking?
You are missing several files on your site that the plugin depends on
This jsfiddle should work (looks like you moved or deleted the images though ...actually ..the whole site...)
http://jsfiddle.net/DelightedDoD/68sv070h/
Here are the requisite files (download your own copies of course);
<link rel="Stylesheet" type="text/css" href="http://smoothdivscroll.com/css/smoothDivScroll.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
Note the following from the plugin's docs:
LOAD JAVASCRIPT LATE - JUST BEFORE CLOSING THE BODY TAG.
That way the browser will have loaded the images and will
know the width of the images. No need to specify the width
in the CSS or inline.
I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad.
I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. As it turns out I was able to reduce it to a simple example. Here are screen shots of the example in iOS and OSX Safari.
The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. You can find a working example on my website. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000
});
});
</script>
<link rel="stylesheet" href="flexslider.css" />
<style type="text/css">
#example{
width:100%;
height:auto;
max-width:400px;
background-color:#f0f0f0;
}
</style>
</head>
<body>
<h1>Flexslider iOS bug example</h1>
<section id="example">
<div class="flexslider">
<ul class="slides">
<li><img src="tallslide.jpg"></li>
<li><img src="wideslide.jpg"></li>
</ul>
</div>
<p>Text after slider</p>
</section>
</body>
</html>
I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. None of those made it any better.
My question is:
How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios?
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.
If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden;
Something like
.flexslider {
height: 300px;
overflow: hidden;
}
You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights.
Something like that?! Customized according to your example ;) (flexslider 2.1 tested)
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000,
after: function(slider){
$(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
}
});
});
From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159
I am trying to make an animation that must only be shown within a specific margin. For example, I have a square div from left to right(100px to 500px) and top to bottom(100px and 500x). A picture is inside this square, the picture will animate from left to right. What I want is to progressively hide the picture when it reaches the square left corner until the picture is completely hidden. This is something similar to a sliding banner. I have tried by setting div margins, but did not work. I am using jquery, but I am open to other libraries. Any suggestion, page or anything will be helpful.
This is an example of what I am doing. The id=picture is sliding to 900px, but what I want is to progressively hide the picture once it has reached the 500px of the id=square.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<style>
body{ background-color:#94B8B8;}
</style>
</head>
<body><!--border-color:white-->
<div id="square" style = "width:500px;height:500px;background-color:blue;position:relative;">
<div id="picture" style = "width:100px;height:100px;background-color:white;position:relative;top:50px;left:50px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:"900px"},1000);
});
});
</script>
Thanks,
Joe|_
jsfiddle: http://jsfiddle.net/jZaxW/1/
You need to add overflow hidden to the square.
CSS:
body{ background-color:#94B8B8;}
#square{overflow:hidden;}
Also, you are loading your libraries in the wrong order. jQuery must be loaded before jQueryUI, although that isn't the issue at hand.
http://jsbin.com/unoqew/1/edit
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:350, opacity:0},1000);
});
});
For some reason I can't get the "smooth div scroll" to work on my portfolio site...
I'm wondering if there is something obvious I'm doing wrong. This is the link to the tutorial I am using:
http://www.smoothdivscroll.com/#howitworks
I use the top code mentioned in the demo in the head.
I use the second code mentioned between a div I have labeled as " because that is where I want this slider to show up, in the "slider" div.
I am fairly new to plugins, but I am very stuck on wanting this slider to work.
Lastly, I use the last code mentioned (the CSS) in my already set up CSS. IT WONT WORK and I'm pulling my hair out. I also have tried to use other people's code that use the same slider, but it won't work.
PLEASE HELP, I'm desperate! I need to finish this website :(
This is fully functional demo page for the smooth scroll plugin. Copy and paste the following html as demo.html on your computer:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Div Scroll</title>
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<style type="text/css">
#scroller {
width:100%;
height: 330px;
position: relative;
}
#scroller div.scrollableArea img {
position: relative;
float: left;
margin: 0;
padding: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#scroller").smoothDivScroll({
mousewheelScrolling: true,
manualContinuousScrolling: true,
visibleHotSpotBackgrounds: "always",
autoScrollingMode: "onstart"
});
});
</script>
</head>
<body>
<div id="scroller">
<img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" />
<img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
<img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
<img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" />
<img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" />
<img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" />
<img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
<img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>
</body>
</html>
Now open this file demo.html in a browser (Firefox or Chrome recommended :)), go to the main menu > Save Page As > choose Web Page Complete (demo2.html) and the browser will save all dependencies (libraries it needs) and also convert all absolute to relative links on your local hardisk. I suppose this is the easiest way how to make it functional.
I guess hot-linking to the scripts on my server is okay just for testing but don't use these links for your permanent solution.
If you download the zip with the latest version from GitHub I have included a test page that you should be able to click and runt straight "out of the box". That is a better solution if you want to run the demo locally.
I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>