So I have this very simple (and probably not built the recommended way) image slider at my wordpress page that I built myself. My problem is that when the images run out, it will just slide whitespace, and so on. I want it to start sliding from the beginning, or just stop sliding at the last image. Here's my code:
HTML:
<div id="gallery-wrap">
<div id="gallery">
<img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage2" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
<img class="galleryimage3" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage4" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
</div>
CSS:
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{position:absolute; width:100%; height:300px; top:0px;}
.galleryimage2{position:absolute; width:100%; height:300px; left:100%;top:0px;}
.galleryimage3{position:absolute; width:100%; height:300px; left:200%;top:0px;}
.galleryimage4{position:absolute; width:100%; height:300px; left:300%;top:0px;}
#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; }
#gallery-next{position:absolute; right:0px; top:0px; width:50%; height:300px;}
And the js/jquery
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{$("#gallery").animate({"left": "+=100%"}, "slow");
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{$("#gallery").animate({"left": "-=100%"}, "slow");
// move to the previous image
position++;
}
});
});
So as you can probably see, I'm thinking what to put in the variables. How does the script know when the images run out? And as you can see, the images are absolutely positioned, that was the easiest way to get them all to the same horizontal line.
If anyone wants to see this in action:
http://wordpress.kotisivut.name/
Why don't you count the amount of images in your slider...
var nr_of_img = $('img', $('#gallery')).length;
Then you can keep count of the number of moves you make from left to right etc and see if you ran out of images.
[Edit]
first of all your if-statements are at the wrong place. You want to do the if-statements in the event functions.
This would mean you would do something like this
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{
// move to the previous image
position++;
}
});
});
You can read this Count number of files in a folder through javascript
With PHP you can have the filecount as
$directory = "../images/team/harry/";
if (glob($directory . "*.jpg") != false)
{
$filecount = count(glob($directory . "*.jpg"));
echo $filecount;
}
else
{
echo 0;
}
Related
So basically I found a really cool example for cycling background images using JavaScript and jQuery.
What would be the best approach to adding an overlay text description effect for each slide?
So for instance, each slide will also have a text description overlayed somewhere on each image with it's own style . Would it be possible to have this text also come in with it's own effects. So the image fades in, and then the text description slides in from the left, and so on
HTML
<body>
<div id="background_cycler">
<img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg/1920px-View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg" width="1000px" height="1000px" alt="" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Amanhecer_no_Hercules_--.jpg/1920px-Amanhecer_no_Hercules_--.jpg" alt="" width="1000px" height="1000px" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Giant_Manta_AdF.jpg/1920px-Giant_Manta_AdF.jpg" alt="" width="1000px" height="1000px" />
</div>
JQUERY
$('#background_cycler').hide();
window.cycleImages = function() {
var $active = $('#background_cycler .active');
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(window).load(function() {
$('#background_cycler').fadeIn(1500); //fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
CSS
#background_cycler {
padding: 0;
margin: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#background_cycler img {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
}
#background_cycler img.active {
z-index: 3;
}
Here's a solution like Andy's, but keeping the img tags:
https://jsfiddle.net/2y8fo13d/
Instead of using img tags, you can use more generic div tags to act as the slides. Then you can fill them with whatever content you wish, check out this as an example:
https://jsfiddle.net/00gow9Lt/1/
Here I have used div tags with some simple text and the original images as backgrounds.
You can style each one's content separately with css for a different look, but to have sliding effects on the text itself would require significantly more code. For that I would suggest reading up on jQuery animations in more detail.
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I've been working with a simple slideshow, but either I can't get the transition effects, or the images go missing on the first run when the effects work.
HTML:
<script>
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow img:first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 3000);
});
</script>
<div class="slideshow">
<img src="img_1" width="700px" height="300px">
<img src="img_2" width="700px" height="300px">
<img src="img_3" width="700px" height="300px">
<img src="img_4" width="700px" height="300px">
</div>
CSS:
.slideshow { position:relative; width:500px; height:332px; }
.slideshow img { position:absolute; left:0; top:0; }
I'm pretty new to coding, so I'm trying to keep it as simple as possible.
You should select $('.slideshow a') as a slide instead of $('.slideshow img'). That's why the code run failed after calling next() function.
JSBin: http://jsbin.com/rofed/1/edit
//defines array of img elements
var current = $('img').length - 1;
//hide all then show the initial element
$('img').hide();
$('img').eq(current).show();
//set the interval
setInterval(function(){ $('img').eq(current).fadeOut("slow"); $('img').eq(current-1).fadeIn("slow"); if (current > 0) { current += -1; } else { current = $('img').length - 1; } }, 2000);
Try this variation of your js function (also, do make sure that you are including jquery as well)
I have a page that has 2 functions that begin on document ready. One begins a slideshow of images fading in and out and another that slowly fades a background image in and out. I have implemented a switch that when clicked, fades in a new background image and overall background-color. I'm trying to figure out how to have this switch also stop the functions that are running on document ready (or disable them completely so the slides aren't sitting still) but also restart them when clicked again. So basically toggle the functions each time clicked. I mocked up a page that has images cycling and a button to change the image and background color (I left off the other function I mentioned to make it less complicated and more clean). Any assistance would be greatly appreciated.
I've looked into adding a global variable and then an if-statement for the functions and then have the click change that global to an invalid, then I tried looking into toggle-functions but had no luck. I'm fairly new to all of this so I apologize if my code is messy or confusing
http://jsfiddle.net/timtim123/d6xn8/2/
<body>
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png" id="backimg" />
<div id="switch">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/darkswitch_zpsc7190818.png" width="46" height="275" border="0" />
</div>
<div class="fadein">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide1_zps169c4a26.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide2_zps72fbcc61.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide3_zpsaf2fb393.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide4_zps9544ea88.png" width="394" height="630" border="0" />
</div>
</body>
body {
background:black;
transition:background 0.2s ease;
}
.clicked {
background:white;
}
#backimg {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#switch {
top: 0px;
left: 100px;
top: 300px;
height:275px;
position:absolute;
z-index: 7;
}
.fadein {
position:absolute;
width:500px;
height:630px;
top: 0px;
left: 500px;
}
.fadein img {
position:absolute;
top: 0px;
left: 500px;
}
//cycle through slides
$(document).ready(function cycle() {
timer = $('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');
}, 2000);
//switch functionality
$(document).ready(function () {
$("#switch").click(function () {
var src = $("#backimg").attr("src");
$("body").delay(2000).queue(function () {
$("body").toggleClass("clicked");
$("body").dequeue();
});
if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png") {
$("#backimg").fadeOut(2000, (function () {
$("#backimg").fadeIn(2000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png");
}));
} else if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png") {
$("#backimg").fadeOut(500, (function () {
$("#backimg").delay(5000).fadeIn(5000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png");
}));
}
});
});
});
1) Try doing it using clearInterval as in the example shown at the top of this page http://www.w3schools.com/jsref/met_win_clearinterval.asp. This will stop the setInterval function.
2) To hide your slideshow / image you will need to use jQuery hide. Stopping a function will not change elements in the DOM.
3) Here is an elaboration on the code in the link I sent you, that includes stop and start functionality.
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Stop time</button>
<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
function myStartFunction()
{
myVar = setInterval(function(){myTimer()},1000);
}
</script>
</body>
</html>
Let me know if you need further information.
FYI - you don't need 2 '$(document).ready' Just put the code of the 2nd one under the code of the 1st one.
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.