i would like to make image slideshow.
First, i would have just thumbnails and when clicked on the one, it would pop up overlay(some sort of div, or something) and there would be option to move through the images. I don't want to use anykind of libraries
i have this, so far:
NewImg = new Array (
"img/1gif",
"img/2gif",
"img/3gif"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
html part
Previous
Auto/Stop
Next
this is the regular image gallery. With regular sized images.
I don't know how to implement those thumbnails
thank for helping me around here
i forgot, i have
used following code for overlays(but don't know how to implement it here)
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById )
{
elem = document.getElementById( whichLayer );
}
vis = elem.style;
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
http://jsfiddle.net/sevdah/z7Ggx/1/ on jsfiddle, but it is not working, don't know why
Related
I've been trying to set up a website that plays a random .webm that loops, then when you press a key, it plays the next random .webm. I got the random part down, but I can't seem to figure out how to get it to wait for the keystroke. Another issue I'm having is that I can't figure out how to get it to load a random .webm when the site is first visited. It just plays the first video (1.webm) I'm sorry if this is a bad question, I'm very new to web development.
I tried to make it so that when the key is pressed it would load a new .webm, but it didn't work.
Here's what I have:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>webm haha</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<video controls loop id="video1" src="data/1.webm" autoplay></video>
<script type="text/javascript" src="lib/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="lib/dat.gui.min.js"></script>
<script type="text/javascript" src="app_nue.js"></script>
</body>
</html>
JS:
var pGetRand;
var getRand;
//Settings
var settings = {
changeThresh : 0.1,
totalClips : 7,
pathToClips : "data/",
pbRate : 1,
mode : 'non-repeating-rand',
}
//Storage
var video1 = $('#video1');
var video2 = $('#video2');
var v1d,v2d,v1ct,v2ct;
var linearTracker = 1;
var gate1 = true;
var gate2 = false;
function toggle(element, pElement){
//start playing before the clip comes to the front.
element.get(0).play();
setTimeout(function(){
element.css('z-index', '500');
pElement.css('z-index', '0');
if(settings.mode == 'random'){
getRand = Math.floor( Math.random() * settings.totalClips +1 )
}
if(settings.mode == 'linear'){
if(linearTracker >= settings.totalClips){
linearTracker = 1;
}else{
linearTracker ++
}
getRand = linearTracker
console.log(linearTracker);
}
if(settings.mode == 'non-repeating-rand'){
getRand = Math.floor( Math.random() * settings.totalClips +1 )
while(getRand == pGetRand){ //are we the same, if so try again until we are not.
console.log("try again",getRand,pGetRand);
getRand = Math.floor( Math.random() * settings.totalClips +1 )
}
pGetRand = getRand
}
pElement.attr({ 'src': settings.pathToClips + getRand + '.webm' });
pElement.get(0).pause();
}, 150)
}
First off, you can use window.addEventListener to run a function on a keypress. The parameter key here has a property that says the id number of the key pressed. You can change that number to change what key needs to be pressed to change the video. You can read more on it here
window.addEventListener('keypress', function(key) {
//32 is the space key, use console.log(key.which)
to figure out the id for the key you want to use
if (key.which == 32) {
toggle();
}
});
In the overall function, you should be changing only the src of the video instead of hiding and showing a whole new element. At the begginning of the function, you would simply add this:
var element = document.getElementById("video1");
var vid = '1';//Backup
And at the end of the toggle function you would reset the time and change the src:
element.play();
element.currentTime = 0;
element.setAttribute('src', settings.pathToClips+vid+'.webm');
For your random function, you probably won't want the last video played to be repeated, so you should use filter to check if the new video id is the same as the last video played.
You can learn more about filter here
if (settings.mode == 'random') {
function getNewNumber() {
var lastVid = usedVids[usedVids.length-1];
if (lastVid == undefined || isNaN(lastVid)) {
lastVid = settings.totalClips+1;
//Makes sure there is no way the new vid could be the same
}
var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == vidNum);
//This makes sure that the video isn't the same as the last video (It helps make it seem more random)
if (isUsed[0] != lastVid) {
vid = vidNum;
usedVids = [vidNum];
}
else {
getNewNumber();
}
}
getNewNumber();
}
For linear, you just increase the variable for what vid you're on and set the video number to that.
if (settings.mode == 'linear') {
currentVidNum++;
if (currentVidNum > settings.totalClips) {
//This resets currentVidNum once it is at the max vids
currentVidNum = 1;
}
vid = currentVidNum;
}
Non-repeating-random is a bit trickier, but you can pull it off with a similar technique as random, except you don't remove all the values from the array of what you've played every time you update the video:
if (settings.mode == 'non-repeating-rand') {
var wasReset = false;
if (usedVids.length >= settings.totalClips) {
//This resets usedVids while still keeping the last video used so it won't play it again
var lastVid = usedVids[usedVids.length-1];
wasReset = true;
usedVids = [lastVid];
}
function getNewNumber() {
var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == newVidNum);
if (isUsed[0] != newVidNum) {
if (wasReset == true) {
usedVids = [];
}
usedVids.push(newVidNum);
vid = newVidNum;
}
else {
getNewNumber();
}
}
getNewNumber();
}
To fix your problem of it not automatically setting a random video, you just need to call the toggle function at the end of the script.
I don't know if this was a good enough explanation so if it helps here's a snippet of the full code: (Although it won't work unless you have the videos :/)
window.addEventListener('keydown', function(key) {
if (key.which == 32) {
toggleVid();
}
});
//Settings
var settings = {
changeThresh: 0.1,
totalClips: 6,
pathToClips: "data/",
pbRate: 1,
mode: 'non-repeating-rand',
}
var currentVidNum = 1;
var usedVids = []; //Used for non-repeating-rand and random
function toggleVid() {
var element = document.getElementById("video1");
var vid = '1'; //Backup
if (settings.mode == 'random') {
function getNewNumber() {
var lastVid = usedVids[usedVids.length - 1];
if (lastVid == undefined || isNaN(lastVid)) {
lastVid = settings.totalClips + 1;
//Makes sure there is no way the new vid could be the same
}
var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == vidNum);
//This makes sure that the video isn't the same as the last video (It helps make it seem more random)
if (isUsed[0] != lastVid) {
vid = vidNum;
usedVids = [vidNum];
} else {
getNewNumber();
}
}
getNewNumber();
}
if (settings.mode == 'linear') {
currentVidNum++;
if (currentVidNum > settings.totalClips) {
currentVidNum = 1;
}
vid = currentVidNum;
}
if (settings.mode == 'non-repeating-rand') {
var wasReset = false;
if (usedVids.length >= settings.totalClips) {
var lastVid = usedVids[usedVids.length - 1];
wasReset = true;
usedVids = [lastVid];
}
function getNewNumber() {
var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
var isUsed = usedVids.filter(a => a == newVidNum);
if (isUsed[0] != newVidNum) {
if (wasReset == true) {
usedVids = [];
}
usedVids.push(newVidNum);
vid = newVidNum;
} else {
getNewNumber();
}
}
getNewNumber();
}
element.play();
element.currentTime = 0;
element.setAttribute('src', settings.pathToClips + vid + '.webm');
}
<video controls loop id="video1" src="data/1.webm" autoplay='true'></video>
For the waiting keystroke issue, you may refer to this webpage.
For the random issue, you may refer to this web page.
I have a big problem with images in javascript embedded aplications. I want make a preload image but I don't know how the browser works.
See this simple example: code
var colors = [
"http://www.robolaranja.com.br/wp-content/uploads/2014/10/Primeira-imagem-do-filme-de-Angry-Birds-%C3%A9-revelada-2.jpg",
"http://imguol.com/c/noticias/2013/12/13/13dez2013---esta-imagem-mostra-a-nebulosa-de-caranguejo-um-iconico-remanescente-de-supernova-na-nossa-galaxia-vista-do-observatorio-espacial-herschel-e-do-telescopio-hubble-uma-nuvem-de-gas-e-poeira-1386961235961_956x500.jpg",
"http://wallpaper.ultradownloads.com.br/121350_Papel-de-Parede-Imagem-Abstrata_1920x1200.jpg"
]
var currentDiv = "div2";
var count = 0;
var lenght = colors.length;
var timeForNextImage = 0;
var preloadOk = false;
setInterval(function() {
count ++;
if (count > lenght) count = 0;
var date = new Date();
var time = date.getTime();
if (time > (timeForNextImage - 3000) && preloadOk == false) {
preLoad();
} else if (time > timeForNextImage) {
play();
}
}, 300);
var play = function() {
if (currentDiv == "div2") {
$('#'+currentDiv).css("visibility", "visible");
} else {
$('#div2').css("visibility", "hidden");
}
var date = new Date();
timeForNextImage = date.getTime() + 10000;
preloadOk = false;
$("#lbl").text("div atual: "+currentDiv);
};
var preLoad = function() {
if (currentDiv == "div1") {
currentDiv = "div2";
} else {
currentDiv = "div1";
}
$("#" + currentDiv).css("background-image", 'url('+colors[count]+')');
preloadOk = true;
};
How you can look, I do a preload, in theory.. but, the browser only processes my image when I put it in the stage ?
What if I change the z-index attribute, it renders again?
You return preloadOK = true but the image doesn't load. That's not a preloader.
To make a preloader you can play with new Image() object or with load() event.
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
See more
3 Ways to Preload Images with CSS, JavaScript, or Ajax
A simple way to preload an image is to just create an image tag and set the url as the src. You don't have to attach it to the DOM to make the request.
var preLoad = function() {
var img = new Image();
img.src = colors[count];
};
How do I show a scrolling (moving) message in the title?
<title>Welcome to Some title</title>
Translate the titlebar into a dynamic that displays additional information using JavaScript (without any CSS).
Here's an eye catching example to get your visitors back when your web page tab is not active within the browser (onblur). This script will animate the original title text with an intro, the original title text is restored when the tab is returned to active state (focus). When the tab is clicked the original page title is restored. For social media sharing it is highly recommended to include the original page title text with the prefaced animated text (onblur).
$(function() {
var origTitle, animatedTitle, timer;
function animateTitle(newTitle) {
var currentState = false;
origTitle = document.title; // save original title
animatedTitle = "Hey There! " + origTitle;
timer = setInterval(startAnimation, 2000);
function startAnimation() {
// animate between the original and the new title
document.title = currentState ? origTitle : animatedTitle;
currentState = !currentState;
}
}
function restoreTitle() {
clearInterval(timer);
document.title = origTitle; // restore original title
}
// Change page title on blur
$(window).blur(function() {
animateTitle();
});
// Change page title back on focus
$(window).focus(function() {
restoreTitle();
});
});
You can add marque in the title bar text through JavaScript. See it in the blog post Add Scrolling Marquee Effects Text to Title Bar.
The unmodified contents of that page, except for the formatting:
/*
Now you can add moving text to title bar of browser for your website or blog.
Here is the code to do this. Add this code in your website or blog in a widget
(after replacing YOUR TEXT with your desired text).
*/
<script language=javascript>
var rev = "fwd";
function titlebar(val){
var msg = "YOUR TEXT";
var res = " ";
var speed = 100;
var pos = val;
msg = " |-"+msg+"-|";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
else {
if(pos > 0) {
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
}
titlebar(0);
</script>
Here's another one. Only goes forward though...
To use: Link to the file and write this line of code
var title = new MovingTitle("Desired title... ", 300, 10);
title.init();
First parameter is the desired text, next one is the update interval, 10 is the number of visible letters...
function MovingTitle(writeText, interval, visibleLetters) {
var _instance = {};
var _currId = 0;
var _numberOfLetters = writeText.length;
function updateTitle() {
_currId += 1;
if(_currId > _numberOfLetters - 1) {
_currId = 0;
}
var startId = _currId;
var endId = startId + visibleLetters;
var finalText;
if(endId < _numberOfLetters - 1) {
finalText = writeText.substring(startId, endId);
} else {
var cappedEndId = _numberOfLetters;
endId = endId - cappedEndId;
finalText = writeText.substring(startId, cappedEndId) + writeText.substring(0, endId);
}
document.title = finalText;
}
_instance.init = function() {
setInterval(updateTitle, interval);
};
return _instance;
}
heres mine:
function animateTitle(Title = "Hello, World!", delay = 300) {
let counter = 0;
let direction = true;
aniTitle = setInterval(function () {
if (counter == Title.length)
direction = false;
if (counter == false)
direction = true;
counter = (direction == true) ? ++counter : --counter;
newtitle = (counter == 0) ? " " : Title.slice(0, counter);
document.title = newtitle;
}, delay)
}
I was wondering if it's possible to include an swf within a javascript carousel that currently just contains stagic images. What I'm looking to do is include a flash animation within the carousel.
I guess I've got two main questions:
Is it possible to cycle through flash files in the same way as an image?
How would I get the javascript and flash to interact so the flash file would know when it had been selected?
If it helps, here's the js we're using:
$(document).ready(function(){
var $looper = true;
var timer;
var currentSlide = 0;
var cell = 0;
var row = 1;
var hCycles = 0;
var aCycles = 0;
//no. of full cycles
var homecycles = 2;
var aboutcycles = 2;
//aboutSlide speed
var fast = 1200;
var slow = 4000;
//hide homepage slides
$('#slide2').fadeOut(0);
$('#slide3').fadeOut(0);
$('#slide4').fadeOut(0);
$('#slide5').fadeOut(0);
$('#slide6').fadeOut(0);
//hide about slides
$('.a-slide1').fadeOut(0);
$('.a-slide2').fadeOut(0);
$('.a-slide3').fadeOut(0);
$('.a-slide4').fadeOut(0);
$('#slide-c1 .a-slide1').fadeIn(1200);
runSlide(fast);
function runSlide(x) {
if ($('body').is('.about')) {
setTimeout(function() {
aboutSlides();
}, x);
} else {
if ($looper) {
setTimeout(function() {
slideShow();
}, 4000);
}
}
}
function slideShow() {
if ($looper) {
if (currentSlide++ < 6 && hCycles < homecycles) {
$('#slide'+ currentSlide).fadeOut(1200);
if (currentSlide == 6) {
$('#slide1').fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn1').addClass('active');
currentSlide = 0;
hCycles = hCycles+1;
} else {
$('#slide'+ (currentSlide+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn'+ (currentSlide+1)).addClass('active');
}
runSlide();
} else {
$looper = false;
}
}
};
$('#slide-wrapper li').each(function(index) {
$('#btn'+(index+1)).click(function(){
$looper = false;
$('.slide').fadeOut(1200);
$('#slide'+ (index+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$(this).addClass('active');
});
});
function aboutSlides() {
if (cell++ < 3 && aCycles < aboutcycles) {
if (cell == 3) {
if (row < 3) {
row = row+1;
} else {
row = 1;
aCycles = aCycles+1;
}
var hide = (row-1);
if ((row-1) == 0) {hide = 3}
$('#slide-c1 .a-slide'+ hide).fadeOut(1200);
$('#slide-c1 .a-slide'+row).fadeIn(1200);
cell = 0;
runSlide(fast);
} else {
$('#slide-c'+(cell+1)+' .a-slide'+ (row-1)).fadeOut(1200);
$('#slide-c'+(cell+1)+' .a-slide'+(row)).fadeIn(1200);
if (cell == 2) {
runSlide(slow);
} else {
runSlide(fast);
}
}
} else {
// create the final strip
$('#slide-c3 .a-slide3').fadeOut(1200);
$('#slide-c3 .a-slide4').fadeIn(1200);
}
}
});
Thanks!
There isn't any problem as to whatever content you want to put in your slides. As long as it is valid html, it's valid in a slide. Countless jquery/motools/etc plugins let you specify whatever you want for content.
flash is valid.
But you might want to revert to another revealing method. setting the opacity on a swf from javascript is complex and yields to different results, according to browser and flash version. If your flash file is custom made, then you can create a function that fades it to white for example, and call it from javascript. But from experience, changing the opacity of a swf is calling for trouble.
I don't know if this is relevant enough to be an answer, I wanted to post it as a comment, but there isn't any comment button. Oh well.
I have built a jQuery rotator to rotate through 3 divs and loop them. I would like to add the functionality on mouse over to "freeze" the current div and then start again on mouse out.
I've thought about setting a variable to false at the start of the function and setting it true when it's on it's current frame but I've got my self a bit confused.
I've also tried to use the hover function but when using the in and out handlers, I'm confused as to how to stop, restart the animation.
function ImageRotate() {
var CurrentFeature = "#container" + featureNumber;
$(CurrentFeature).stop(false, true).delay(4500).animate({'top' : '330px'}, 3000);
var featureNumber2 = featureNumber+1;
if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
var NewFeature = "#container" + featureNumber2;
$(NewFeature).stop(false, true).delay(4500).animate({'top' : '0px'}, 3000);
var featureNumber3 = featureNumber-1;
if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
var OldFeature = "#container" + featureNumber3;
$(OldFeature).stop(false, true).delay(4500).css('top' , '-330px');
setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500)};
Any help would be greatly appreciated!!
Thanks, Matt
If you were to add this code:
var timerId = null;
function startRotation() {
if (timerId) {
return;
}
timerId = setInterval('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500);
}
function stopRotation() {
if (!timerId) {
return;
}
clearInterval(timerId);
timerId = null;
}
and replace the last line of your code block with a simple call to startRotation();, then you could call stopRotation and startRotation when the mouse hovers over/leaves your element:
$('your-element-selector').hover(stopRotation, startRotation);
It's not clear what you are trying to do with the three divs without seeing the HTML and more code, so I think a basic example might help you better (demo).
HTML
<div class="test">image: <span></span></div>
Script
$(document).ready(function(){
var indx = 0, loop, numberOfFeatures = 5;
function imageRotate(){
indx++;
if (indx > numberOfFeatures) { indx = 1; }
$('.test span').text(indx);
loop = setTimeout( imageRotate , 1000 );
}
imageRotate();
$('.test').hover(function(){
clearTimeout(loop);
}, function(){
imageRotate();
});
})
changed things up a little bit, here is how I ended up doing it. `
var animRun = false;
var rotateHover = false;
function startRotation() {
rotateHover = false;
ImageRotate();
}
function stopRotation() {
rotateHover = true;
clearTimeout();
}
function ImageRotate() {
if (rotateHover == false){
animRun = true;
var CurrentFeature = "#container" + featureNumber;
$(CurrentFeature).stop(false, true).animate({'top' : '330px'}, featureDuration, function(){animRun = false;});
var featureNumber2 = featureNumber+1;
if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
var NewFeature = "#container" + featureNumber2;
$(NewFeature).stop(false, true).animate({'top' : '0px'}, featureDuration); /* rotate slide 2 into main frame */
var featureNumber3 = featureNumber-1;
if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
var OldFeature = "#container" + featureNumber3;
$(OldFeature).stop(false, true).css('top' , '-330px'); /*bring slide 3 to the top*/
//startRotation();
setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; if (rotateHover == false){ImageRotate2()};', featureDelay);
};
};