I am doing a website, in the header of that website I want a "slideshow" that shows RANDOM images - this I already have with javascript.
I want to have the images to FADE in/out in instead of just changing them.
Other than that, I really want to know if there is any way I can make the script load pictures from a directory itself instead of I have to manually update the script each time I upload a picture.
Can this even be done with javascript, php, css or jquery?
Any alternatives? div change background random with fade? anything?
Here is the code I am using now.. its changing pictures with no problem.
<script language="javascript">
var delay=1000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
Yes all of this can be done with javascript (almost), javascript itself can't scan folder contents for that you need some kind of server language, most likely you would use PHP to scan folder contents and return them to the client.
So basically you would need one of jquery ajax function, i would highly recommend post
So now with ajax you can get all of your needed data about the folder.
Now about fade effect, you would need to use something like this or this
As for randomness i'm pretty sure you can figure that out, just get a full list of images put them into array and use javascript random function to take random image from that array.
Related
First, here is my crazy code that you will hate
So I have this image that I want to replace with a jQuery fade effect whenever the hash changes. I want for it to check the hash on onLoad too. Right now I have a crazy code that I am pretty sure doesn't work because I am a kind of new Javascript developer. It is a horrible code.
If the code worked, it would do this:
//Home Hashes
var home = [
"#home",
"#news",
"#team",
"#cont",
"#about",
"#FAQ"];
It would check for for the hashes in each of these arrays, if it finds a match in one array, it will fade out the current image, switch them out, and fade the new image in. Depending on what array it is in, it will choose a different image.
(BTW, when changing the image it is changing the src in the html.)
I am using this to change my logo based on where you are on the site. My site has different logos for different sections.
You need to use onload plus hashchange
window.onload = checkHash;
window.onhashchange = checkHash;
function checkHash() {
// check stuff
}
Working Fiddle :: careful hash does change :-)
http://jsfiddle.net/R9cNW/9/
I have a javascript function which animates images like a slide show. What I'd like is to just have the images being displayed one after another from left to right.
I can't seem to find where in the code the images is getting replaced.
var realoffset = d.offset % d.total;
$(this)
.html(d.titles[realoffset])
.attr('action','article:'+(realoffset+1))
.fadeIn(600);
$(this)
.siblings('img')
.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
.attr('action','article:'+(realoffset+1))
.fadeIn(600);
.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
This code is replacing the src of the img tag. You're going to want to be inserting new img tags to show them side by side, not replacing the current tag's src.
Did you write that jQuery snippet yourself? I'm guessing not. Anyway, there are a lot of factors involved in creating a "slideshow" with JavaScript. It sounds like you just need some general knowledge about the subject.
First, let's get your vision straight. Based on your code, you seem to want to fade images into view as they are cycled in the slideshow. For that, study this example:
http://jsfiddle.net/Y6fnx/1/
Now, your code does stuff with d.titles; purely by inference I'm guessing that this displays the image and also a caption for the image? For that, study my updated fiddle:
http://jsfiddle.net/ESP9S/1/
There are countless ways to create a slideshow! You can implement auto-play by taking advantage of JavaScript's setTimeout. You can load your captions from somewhere else. You can get your images from a external script (like Barbara mentioned). You can slide your images instead of fading them by playing with jQuery animate. It never ends!
I have created the following image gallery.
http://jsfiddle.net/sfiddle/Nf7yR/7/
I think the thing is, that even though I can get a hand on the paragraphs css, the currentIndex won't update, i.e. an event listener seems to be missing.
var thumb = document.getElementById("thumb");
myParagraphs = thumb.getElementsByTagName("p");
console.log(myParagraphs[1]);
function thumby(){
$(myParagraphs[currentIndex]).css("background-color", "red");
}
thumby();
The thing is that I can not manage to link the image index with the index of the pagination dot (which has a normal p tag).
I want to code it in that way that if the first picture is displayed the first dot is red, if the second image is displayed the second ...
How could I approach this?
Thanks for any good advice as I invested a few hours already but can not get my head around it.
PS: no, I want no plugin or ready made imagegallery, I want my approach to work :-)
You made a function thumby() but you are calling it only once (during script start). You just need to call it when you change currentIndex. Here you have fixed code: http://jsfiddle.net/Nf7yR/10/ (I commented my edits).
BTW your code looks terrible. You should indent it properly to make it easier to read :)
I have two floated divs: a #center div and a #sidebar div. Center div has got updatable text in it and so its height is set to auto. The sidebar div also has height auto but, right underneath a scrolling div with definite height, it continues till reaching the bottom of the first div. I want to fill this different space by loading a proper class (each with different backgrounds and different heights).
So far I managed to create a js script that retrieves center div height and displays a msg according to its value.
<div id="center">
<p>Some long text</p>
</div>
<div id="sidebar">
<div class="scroller"></div>
<script type="text/javascript">
var gd;
function getDivHeight(divID){
gd = document.getElementById('center').offsetHeight;
if(gd <=400) alert("no space");
else if(gd >400 <=500) alert("short space");
else if(gd >500 <=600) alert("mid space");
else if(gd >600 <=700) alert("large space");
else if(gd >700) alert("too much space");
}
getDivHeight('center');
</script>
What I don't know is how can I use that gd value to load a certain class or div. Can it be done all in JS or do I need some PHP? I'm new in both of them and can't really find my way around without some help.
Any suggestion or hint that could put me on the right track will be highly appreciated
I guess it can't be done this way since Php is parsing the page before JS is performing any kind of calculation. The only way to do such thing is probably passing through Ajax and return to php which sounds awfully complicate to me ^__^
Alberto
To clarify, PHP runs on the server and javascript runs on the browser (client-side). If you want new information from the server, javascript cant access the server.
The way around that is to use AJAX calls, where a user action such as scrolling or button press initiates a javascript function that fetches some data/information from the server. The server can provide this using PHP (or another language). In the browser, javascript can then insert or add this information (perhaps a div) dynamically to the existing page.
There is a very simple ajax example here (with PHP). I am not associated with it. I would recommend that you download and get it working to understand AJAX.
I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.
Presently I've attempted something similar to this question: "reloading a page after every 10 sec in rails 3.1"
(This is a Rails application, but I probably don't need a Rails specific answer in this case.)
Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.
The first solution that's marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I'm trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it's acting on the actual image tag, it yields nothing.
I'm sure I'm missing something rather simple since JS is not a strong suit for me at the moment.
Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.
If you're up for jQuery, this can be done quite easily:
$(function() {
setInterval(function() {
$('img').each(function() {
$this = $(this);
$this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 30 * 1000);
});
In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn't matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.
jQuery is famous for its use of CSS-like selectors.
Replace $('img') with one of these:
$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".
There's also the :not() selector, which can filter your results:
$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');