images being replaced when I want the next image just added - javascript

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!

Related

Cloning more than one image javascript

I'm trying to use this glitch effect in a slideshow, so it can work I have to clone the source image 3 more times. The first image works just fine, it's when I try to add the second image of the slideshow that the problem comes up. Instead of cloning que second image itself, the first image kind of reads that like one of it's clone.
Here's a fiddle of what I got so far https://jsfiddle.net/oqbf6kkc/
I think the main problem is the javascript but I can't really understand.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})
Trailing commas are always a problem.
Please remove the comma present in front of nth-child selector
.glitch-image img:nth-child(2), {
Also, I am not sure about the effect you mentioned but there is some problem with your JS code as well. You are not iterating over all of the elements.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})
I made some changes to your code.
Check them here.

jQuery .hover() not changing image

I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.
$(".toppic").hover(function() {
var imgsrc = this.src;
$("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {
$("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})
I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.
Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.
I hope that helps.

Fade and replace image with other image depending on hash

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/

Image gallery pagination

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 :)

Random slideshow with fade

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.

Categories

Resources