It has been a very long time since I last looked at jQuery. I have the following markup
<div class="col-md-3">
<div id="race_track">
<%= image_tag 'race_track/track_curved.jpg', data: { engine: 'Sports'} %>
<%= image_tag 'race_track/track_hills.jpg', data: { engine: 'Hills'} %>
<%= image_tag 'race_track/track_rough.jpg', data: { engine: 'Rough'} %>
<%= image_tag 'race_track/track_straight.jpg', data: { engine: 'Straight'} %>
</div>
<p class="lead"><a class="btn btn-lg btn-info">Select</a></p>
</div>
What I am looking to achieve is have each image display one at a time and then when I click 'Select' the loop would stop on whichever image it was on at the time (though this can be random if needed).
I have had a look at the jQuery Cycle Plugin but the pause event only happens when you hover over the images and that's not what I was looking for.
I don't want to reinvent the wheel here.
From jQuery Cycle Plugin Option Reference, you can call its api to pause it like $('#slideshow').cycle('pause');
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 500
});
$('#start').on('click', function() {
// Make it roll again
$('.slideshow').cycle('resume');
});
$('#stop').on('click', function() {
// Make it pause rolling.
$('.slideshow').cycle('pause');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow" style="position: relative;">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0;">
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 0.0945702; width: 200px; height: 200px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 0.904508; width: 200px; height: 200px;">
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;">
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
</div>
<button id="start">start</button>
<button id="stop">stop</button>
Related
Im trying to move this image in css but it just wont move no mater how many times I test it, what am I doing wrong?
#yahoo1 {
position: absolute;
top: 100px;
left: 800px;
}
<p id="yahoo1">
<a href="http://www.yahoo.com">
<img border="0" alt="yahoo" src="images/yahoo.png" width="300" height="300">
</a>
</p>
#yahoo1 {
position: relative;
}
#yahoo1 a {
position: absolute;
top: 100px;
left: 800px;
}
#yahoo1 img {
display: block;
}
I have a background image, a logo, and some text. The logo and text need to fade in and slide (in opposite directions), just like the video here:
Here is a video that does something similar. I just want them to animate in and stop. i don't need it to be as detailed as in the video.
For some reason I cannot get my image to do anything. It does not slide anywhere. When the animation is done, I want it to sit next to the text.
Also, my text slides to the right like I want, but after it moves right, it automatically sends itself back left in an ugly way. I just want it to slide right and stay there. Thanks for the help.
HTML & jQuery:
<!--Background image here -->
<img src="path" width="some width" height="some height"/>
<div class="centre">
<div style="float: left;">
<!--Logo Here-->
<img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myImage').animate({ 'right': '250'}, 16000);
$('#first').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#second').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#third').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#fourth').animate({ 'left': '50', 'opacity': 1 }, 1600);
});
</script>
CSS:
#first, #second, #third, #fourth{
opacity: 0;
}
.centre {
min-width: 500px;
margin: auto;
top: 125px;
left: 350px;
bottom: 0;
right: 0;
position: absolute;
z-index: 999;
}
Try this:
HTML:
<!--Background image here -->
<div class="centre">
<div id="image">
<!--Logo Here-->
<img src="http://placehold.it/350x150" id="myImage"/>
</div>
<span id="border"></span>
<div id="text">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
CSS:
.centre {
display: table;
margin:0 auto;
}
#image {
opacity: 0;
display: table-cell;
position: relative;
margin-left: 0px;
float:left;
}
#border {
border: 1px solid black;
position: absolute;
height: 150px;
margin-left: -10px;
opacity: 0;
}
#text {
opacity: 0;
position: relative;
float: left;
vertical-alignment: middle;
display: table-cell;
margin-left: -220px;
}
JS:
$(window).load(function() {
$( "#image" ).animate({
opacity: 1,
marginRight: "0.3in"
}, 1500 );
$( "#text" ).animate({
opacity: 1,
marginLeft: "0.1in"
}, 1500 );
$( "#border" ).animate({
opacity: 1
}, 5500 );
});
See Example.
You could also work with covers above the image and the text with different z-index values.
There are two overlays (covers) that are hiding the text and the image. You can check-out how it works if you're setting the opacity values of the covers to a lower alpha, then you can see how they hide the elements.
Have a look at the demo below and here at jsFiddle.
I think there's one thing to improve in the code and that's the vertical alignment of the text. It's not centered.
$(document).ready(function () {
$('.text>p').each(function (index, item) {
//console.log(item, this);
$(this).delay(100 + index * 200).animate({
'left': '100%'
},
600 + index * 100,
'easeInQuad');
});
$('.logo').animate({
'left': '0',
'opacity': '1.0'
}, 800);
//$('.coverLeft').delay(1600).animate({'opacity': '0.0'}, 1000); // not required because z-index is below image and above text
$('.coverRight').delay(600).animate({
'opacity': '0.0'
}, 1000);
});
.logo {
/*reveal from right to left*/
position: absolute;
left: 50%;
width: 50%;
text-align: right;
opacity: 0.0;
z-index: 7;
}
.wrapper {
padding-top: 10px;
margin: 0 auto;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
.text {
/* reveal right */
position: absolute;
left: 0;
width: 50%;
/*display:table-cell;
vertical-align:middle;*/
opacity: 1.0;
white-space: nowrap;
z-index: 4;
padding-left: 10px;
}
.text p {
font-family: sans-serif;
position: relative;
/*line-height: 20px;*/
}
.coverLeft {
position: absolute;
background-color: #fff;
left: 0;
height: 100%;
width: 50%;
opacity: 1.0;
z-index: 6;
}
.coverRight {
position:absolute;
right: 0;
width: 50%;
height: 100%;
background-color: #fff;
opacity: 1.0;
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="coverLeft"></div>
<div class="coverRight"></div>
<div class="wrapper">
<div class="logo">
<img src="http://lorempixel.com/200/200/fashion/9/" />
</div>
<div class="text">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
<!--Background image here -->
<!--<img src="path" width="some width" height="some height"/>-->
<!-- <div class="centre">
<div style="float: left;">
-->
<!--Logo Here-->
<!-- <img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>-->
I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:
DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}
<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>
I'm trying to create a sliding image gallery where every interval they will slide along and the first image will fade out and the new image will fade in. The fading in and out is working and my images are set as 'position: absolute', but they won't slide. I set up a jsfiddle so you can see what's happening:
http://jsfiddle.net/9awwF/
The HTML code:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<p id="discoImg1a"><a href="includes/images/discoImg1.png">
<img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>
<p id="discoImg2a"><a href="includes/images/discoImg2.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>
<p id="discoImg3a"><a href="includes/images/discoImg3.png">
<img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>
<p id="discoImg4a"><a href="includes/images/discoImg4.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>
<p id="discoImg5a"><a href="includes/images/discoImg5.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>
<p id="discoImg6a"><a href="includes/images/discoImg6.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>
<p id="discoImg7a"><a href="includes/images/discoImg7.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>
<p id="discoImg8a"><a href="includes/images/discoImg8.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>
<p id="discoImg9a"><a href="includes/images/discoImg9.png">
<img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>
</div>
</body>
The script:
$(document).ready(function () {
$("#discoImg6a").hide();
$("#discoImg7a").hide();
$("#discoImg8a").hide();
$("#discoImg9a").hide();
var currentFirstSlide = 1;
var maxSlides = 9;
function updateSlides() {
// Fade out the first image shown
$("#discoImg" + currentFirstSlide + "a").fadeOut(3000);
// Go through every image and move them to the left by 250px
for (var x = 1; x < 10; x++) {
var left = $("#discoImg" + x + "a").position().left;
$("#discoImg" + x + "a").animate({ left: left - 250 + 'px' });
}
// Calculate which slide the new one will be and fade it in
var newSlide = currentFirstSlide + 5;
if (newSlide > maxSlides) { newSlide = 1; }
$("#discoImg" + newSlide + "a").fadeIn(3000);
// Increment the current first slide ready for the next update
currentFirstSlide++;
if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; }
}
// Move the slides every 3.5s
setInterval(function () { updateSlides() }, 3500);
});
Thank you in advance for any help!
You're animating the left property of the p element, but it has a default position of static, so this doesn't do anything. You should either animate left on the img element or give absolute or relative positioning to the p element.
The problem is that the p element has the id, not the img
<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>
There is no effect with property left without position absolute or fixed.
On your css try giving that absolute positions a left: 0px; may be it's going to slide automatically, and don't forget to give it a relative container.
I want to set the image src by using a text returned by a JavaScript function. What is the correct way to assign JavaScript return value to src? Code below:
What I am trying to achieve here is adding a dummy random number to the end of the url in order to get rid of browser image caching.
<body><div class="slideshow" style="position: absolute;">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
</div>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);//-->
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
</script></body>
use jQuery. You will need to add an id attribute to your img tag but this should do it.
<img id="imgLink1" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
$().ready(function(){ $('#imgLink1').att('src', getMyLink()); });
My advices : avoid inline JS, use CSS, and use JQuery.
I would do like this :
<body>
<div class="slideshow" style="position: absolute;">
<img id="img1" src="" class="myImages" title="image">
<img id="img2" src="" class="myImages" title="image">
</div>
<script>
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
//Assign image source and display it (you have defined display:none attribute)
$('#img1').attr('src', getMyLink()).fadeIn(300);
$('#img2').attr('src', getMyLink()).fadeIn(300);
</script>
<style>
.myImages {
width : 1024px;
height : 768px;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 5;
opacity: 0;
}
</style>
</body>