Fade and replace image with other image depending on hash - javascript

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/

Related

images being replaced when I want the next image just added

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!

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

How to reload offsite image sources every 30 seconds with JavaScript?

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"])');

Best way to rearrange positioning of images/divs with javascript/jquery?

I took a peek at the source of http://wonderwall.msn.com and noticed how all the span tags that the blocks of the wall have don't seem to be associated with any ID. It makes me very curious how they are able to accomplish the animated repositioning of elements when you click on one of the blocks/images without associated ID.
I am curious how you can click on say an image and get other images around it to move to the side. Is it some sort of formula or algoirthm?
I would like to accomplish getting say, 5 spans/blocks, clicking on one, and getting others to animate/move to the sides.
IDs are not necessary and often harmful. You don't need them, generated or otherwise.
When you put an element on a page with an ID, you're making the claim that there should be only one of whatever it is. Seldom is this true. More often, what you want to do is associate some behavior with some of the elements on the page, of which there may be many, one or zero.
In this case, there are lots of little image dealies, which when clicked, rearrange themselves. I don't have an algorithm for you for calculating how they should move, but here's a framework for how you could achieve the same with jQuery.
// create jQuery plugin for highlighting and shuffling brick dealies
(function($){
function expandify() {
var href = this.attr('href');
// create a popup containing the href
return this;
}
function shuffle() {
this.each(function(index, elem){
// calculate new position and move the element there.
});
return this;
}
$.fn.expandify = expandify;
$.fn.shuffle = shuffle;
})(jQuery);
// attaches behaviors to elements on the page after they've loaded
// either $.ready, or window onload, or after some ajaxing takes place
$('.wallBrick')
.click(function(e){
$(e.target)
.expandify();
$('.wallBrick')
.not(e.target)
.shuffle();
});
The IDs are generated via JavaScript on-the-fly. You won't see it in the source, but you'll see it if you inspect it with Firebug.

User sets BackgroundImage. Store image url in cookie so it loads on next visit

I am working on a website:
http://tawfiq-aliyah.co.uk/epic/Site2/
I want the user to be able to set the BackgroundImage. I have implemented this with the pop-up menu in the bottom left hand corner already. But what I want is for the data about the users choice of background image to be stored so that when they come back to the site or move to another page on the site it loads the same background image.
I have looked into java cookies on the w3schools.com website
w3schools.com/js/js_cookies.asp
I have looked at the example but I am not sure how to get the cookie to store the backgroundImage of the instead of storing a username.
Any help would be much appreciated.
Thanks
In the click handlers for the thumbnails in the background image selector you do things like this:
onclick="main.style.backgroundImage='url(images/back3.jpg)'"
If you replace that with a function:
onclick="setBackgroundImage('images/back3.jpg')"
and then
function setBackgroundImage(url) {
main.style.backgroundImage = 'url(' + url + ')';
setCookie('BG', url, 100); // Or however many days you want.
}
And then, in an onload handler, do something like this:
var bg = getCookie('BG');
if(bg)
main.style.backgroundImage = 'url(' + bg + ')';
You might want to do more sanity checking on the cookie value though, you have a list of available backgrounds kicking around so you could just check that bg is defined and that it is in the list.
Also, you might want to use absolute URLs for your images rather than relative ones, that makes it easier to move things around.
I've never worked with cookies in javascript, but looking at the w3c exampple you provided, wouldn'nt it be fine to use that technique and just store the url instead of the username? And then set the img:src or background-url or what ever you are using to that url from the getCookie function? (or later, whenever the dom is ready).
An alternative could be to use local storage, but it might be overkill for what you are trying to do.

Categories

Resources