Jquery :: Background Photo Effects?
Jan 26, 2010
I am currently in discussions with a client to build them a website. The client has done the design assuming it will be built with Flash (ie. the pages are all full colour beautiful hi-res photos that fade in and out with the website content and navigation overlaying that.However, i prefer not to make websites with flash because i feel its more difficult to achieve the seo benefits and deep-linking that is so easy with standard website.So i guess my question is can i achieve these same background photo fade effects with Jquery. Ive been trying to find an example online but cant anything not using flash.I guess what im trying to do is similar to http://www.august.com.au/ except with a series of images fading in/out in the background.
View 2 Replies
ADVERTISEMENT
May 6, 2009
i want to know how to make a photo effects like the one in this site http:[url].... in the downleft corner press next or previous & see the effect of fadding.
View 1 Replies
View Related
Dec 3, 2010
I am attempting to do a background photo, with a png overlay faded in.
Code is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Christmas Card with a Difference</title>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one </style>
<script src="[URL]"></script>
</head><body><script>
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</script>
<img src="Card Images/background.jpg" width="1280" height="741" alt="background" />
<div id="one" style="position: absolute; left: 0px; top: 00px;"><img src="Card Images/overlay.png" /></div>
</body></html>
Now I've probably butchered the code somewhere but it works fine in all browsers except IE (no surprise there then) where it doesn't fade in, it just pops up.
View 1 Replies
View Related
Apr 28, 2010
I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this:Photo / Text about Photoand have both switch after a little while, to the next photo and text.
View 5 Replies
View Related
Apr 29, 2011
I am trying to change my sites background color. The color changes but it doesn't go back to the first image anymore. does anybody know what the problem could be?
jQuery Code:
HTML Code:
View 1 Replies
View Related
Nov 1, 2010
I used the code here for my photo rotator: [URL]. It works when there's one rotator on the page, but I need to add a few and that does not work.
function theRotator() {
//Set the opacity of all images to 0
$('.photos img').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('.photos img:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 4000 = change to next image after 4 seconds
setInterval('rotate()',4000);
} function rotate() {
//Get the first image
var current = ($('.photos img.show')? $('.photos img.show') : $('.photos img:first'));
var currentButton = ($('.photos a.active')? $('.photos a.active') : $('.photos a:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.photos img:first') :current.next()) : $('.photos img:first'));
var nextButton = ((currentButton.next().length) ? ((currentButton.next().hasClass('active')) ? $('.photos a:first') :currentButton.next()) : $('.photos a:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
nextButton.addClass('active');
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
currentButton.removeClass('active');
};
$(document).ready(function() {
//Load the slideshow
theRotator();});
View 1 Replies
View Related
May 14, 2009
I'm putting together a portfolio site and I'd like to use high-res images that take up most of the screen to show different works. There
would be a menu bar with links to each work, where a click on that work's link would change the background by doing a standard "dissolve"
effect.I have seen many different plugins for "rotating" images and changing background colors at the click of a button. Is there a method
specifically for this purpose? As an alternative to altering the background-image of the body itself,I would be willing to use a properly sized div (or div's) to achieve this effect.
View 5 Replies
View Related
Oct 18, 2011
I am using some excellent code for a photo slide show from ..
The way this slide show gallery works is there are mulitple list items in an UL and within each list item is an image. sequentially one list item has the class .show and this changes the css of that list item so opaque is set to 1. Making it visible. A timer determines when the list items change so the next list item within the hierarchy has .show. Once is reaches the last list item, it goes back to the first item.
The problem I have with my code is that when the page first loads up, the first image displays briefly before changing to the second image. After this happens, the slide show behaves correctly.
In bold are the the important lines of code. First I use jquery to assign .class to first list item. The second line of code in bold is a conditional statement. If no image has .show, assign it to the first list item. This is when the code doesn't work as intended.code...
View 1 Replies
View Related
Apr 4, 2010
My website:
[URL]
What the thing is:
.horizitem a:hover, .horizsubitem a:hover
Must be fading out when the mouse is out.
.horizitem a:link, .horizitem a:visited
When i move over this object then the div .horizsubframe is coming down there. .horizsubframe must be coming easily from the the top to the bottom easing. And when i leave that div, it's disappearing from the bottom to the top.
I don't know anything of Jqeury.
So you get when you move over a block it's coming immediately but when you leave it it's slowly fading out. (the background color). When you move over a item in the mainmenu then there is coming a div beneath it now. But i wanna have that that div is easing from the top to the bottom then. And when you leave it from the bottom to the top.
View 2 Replies
View Related
Apr 1, 2011
i'm completly new to this kind of stuff and now i have a (little) problem. First of all i had done a Accordion with Tabs like here:[URL]... Thats currently working. I split every head/title of the 3 panes in 2 parts (div), first the name of the head-pane, e.g. "First Pane" and a div-container for a navigation...
I want that the navigation part fade in of the current activating pane and the other navigations should be fade out.It's not easy to explain what i mean
[Code]...
View 1 Replies
View Related
Jan 3, 2011
I wish to animate the fade in fade out effects on the text content in the table. i am using the following code.[code]but the problem with this code is that the both fadein and fadeout effect occurs simultaneously. Also i do not want the content of the div tag with id "about_content" to shift from one place to another as it is happening with this code. I want it to be seen at the top position of the block as it appears at the end of the animation.i have attached the .rar file having all the files of this project.
View 1 Replies
View Related
Aug 8, 2011
I'm not sure how to have two effects be applied to an element silmultaneously. For instance, I would like to have an element fade in uring fadeIn(), while also having it animate it's position. When I chain together my effects, they happen in sequence, not at the same time...
View 1 Replies
View Related
Nov 11, 2009
So, i have some basic jquery tabs ( http://jqueryui.com/demos/tabs/ ) which are being switched between them using 2 effects: slide up/down and fade in/out:
Code:
$(document).ready(function(){
$('#MainTabs').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
[code]....
View 8 Replies
View Related
Feb 6, 2009
Javascript and implemented a few nice JQuery features on my new website. All of them work great in Firefox and Safari.In IE6, however, the site looks like a mess, even with Javascript enabled in the options panel.
View 4 Replies
View Related
Sep 24, 2009
I am trying to a setup a jquery based navigation for my photo gallery i.e something like facebook using hash url technique. I am using php and mysql in the backend. Is there any example I could look at for implementing it. The reason for using hash urls is that I would like to have an unique url for every pic.
View 1 Replies
View Related
Sep 10, 2010
I really need a good photo gallery for my website, which must be done by Sep. 16th! I would like a jquery like fancybox or slimbox. Ican't figure out how to do either of them! I have absolutely no experience with this kind of stuff and would REALLY APPRECIATE if someone could provide a step-by-step instruction for me on how to set it up
View 2 Replies
View Related
Aug 2, 2009
I am trying to write a background image swapper, which I have got working. Ideally I would like to add a transition between the classes I am changing.
I am new to jquery, and I thought this would be a simple project to start on, but I just can't get the fade to work. see below for my code:
[Code]...
View 1 Replies
View Related
Nov 15, 2010
I am trying to make a piece of text glow green then back to black every time a user clicks a button. My code looks like this [code]...
This works well. However, when i click the button so fast so many times in a row, the animation lags behind, because jQuery is trying to finish each animation to the end before going forward. Is there any way to disable this? Like, put something before .animte() to tell it to cancel any previous animations?
View 1 Replies
View Related
Jan 29, 2011
im new to jquery and still learning, i want to ask how can i apply animate effects in a div class, i have a class made for my content and im trying to apply opacity to my div using jquery, but i guess im not able to apply it to a div class, ive done the same thing with a div ID its working fine for my header. here is my code
<div class="mydiv" style="border-color:#FFF; border-style: solid;">
<p>some text</p>
</div>
View 1 Replies
View Related
Nov 1, 2011
I have worked with Jquery a bit. I recently used cycle plugin for my images. I can't use any other effect other than fade. The cycle won't respond. Should I include easing to get those effects?
View 2 Replies
View Related
Aug 18, 2009
I have tried various things to get this to work in IE, and I'm not sure why it won't work. The shuffle effect works, but not properly. It works in all the other browsers just fine. I've uploaded the code to jsbin here: [URL] I need this solved by the end of the day tomorrow, so if someone wants to take a look at it, please let me know what you think.
View 4 Replies
View Related
Jun 9, 2011
I've made a form in php, but I want jquery to animate the error messages using slideDown.
I'm trying to implement this with the first name but am having no luck. I don't want to redo the validation in javascript.
Current code:
$firstname = $_POST['first_name'];
$lastname = $_POST['last_name'];
[Code]......
View 1 Replies
View Related
Sep 3, 2011
I am trying to fire an animation or even a simple fadeIn() by itself during a hover event. So far non of this fires. I am no longer getting any errors in my chrome inspector. The only things that will work is getting the id and firing the alert with the id in it.
$('.thumb_image', '#thumbs_section').hover(function()
{
id = this.id;
var info_id = 'info_'+id;
[Code]......
View 1 Replies
View Related
Sep 29, 2009
My website has a large banner, that rotates between several hardcoded images with a fading effect. (see the onmouseover demo (lower left) from DynamicDrive)
I also added an image magnifier Jquery script to the page as well.. Click on the thumbnails and the magnified image fades in from the original image to the center of the screen.
In Internet Explorer, this combo works.. the large banner stays at the back, and the magnified image, appears ontop...
BUT.. in Google Chrome (& Apple Safari) - its the opposite. The banner remains topmost and the magnified image apears above everything else but behind the large banner..
Is there anyway to force Chrome to understand which is which? I rather like Chrome and don't want to move back to IE..
PS:: I'll just quick that the whole sha-bang works exactly right in Frontpage Preview as well.. so..
View 3 Replies
View Related
Jan 30, 2011
I have a jquery script that prepends a <div> tag on button click. Additionaly in this script there are some jquery effects(like slideDown) applicable to <div> tags that were before(and for them effects work fine) and also to <div> which was prepended. However, after new <div> is prepended the effects don't work on it, why?
View 1 Replies
View Related
Nov 7, 2010
I was trying to apply 2 javascript effects on one image. First, I use this Jquery effect on the image. It works like it should until I put in the light box effect (this is the one I am using. The lightbox also works, it just depends on which order I put them in the code on which one will come through.I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?).Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.CODE
<script type="text/javascript" src="javascript/lightbox/prototype.js"></script>
<script type="text/javascript" src="javascript/lightbox/scriptaculous.js?load=effects,builder"></script>
[code].....
View 1 Replies
View Related
