|
JavaScript - Javascript + Php Image Fade Gallery
Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you.
My PHP code: PHP Code: <?php class images { var $images = Array(); var $imgDir = 'images/'; function getImages() { $images = Array(); if ($dir = opendir($this->imgDir)) { while(($file = readdir($dir)) !== false) { if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file; } closedir($dir); } return $images; } function getNextImage() { if (($images = $this->getImages()) !== false) { session_start(); if (!isset($_SESSION['image'], $images[$_SESSION['image']])) { $index = mt_rand(0, count($images)-1); } else { $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1; } $_SESSION['image'] = $index; return $images[$index]; } return false; } function outputImage() { if (($file = $this->getNextImage()) !== false) { header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1 header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past header('Content-type: image/jpg'); readfile($this->imgDir.$file); exit(); } } } $img = new images(); $img->outputImage(); ?> My HTML page: Code: <html> <head> <title>Images</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script> </head> <body onload="startSlideShow();"> <h1>Images</h1> <div id="imageWrap"> <div id="images"> <img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" /> <img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" /> </div> </div> </body> </html> CSS code: Code: #imageWrap {
clear: both;
}
#images {
position: relative;
clear: both;
}
#sampleImgFade {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript code which doesn't work properly(just to show in which direction I'm going): Code: var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
img = new image();
img.src = "images.php";
}
function coverLoaded(obj) {
loaded['cover'] = true;
setOpacity(obj, 100);
window.setTimeout("startFade", 5000);
}
function mainLoaded() {
loaded['main'] = true;
if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
loaded['start'] = false;
loaded['main'] = false;
loaded['cover'] = false;
fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
var obj = document.getElementById("sampleImgFade");
var opacity = getOpacity(obj);
if (opacity > 0) {
setOpacity(obj, opacity-5);
} else {
window.clearInterval(fade);
document.getElementById("sampleImg").src = "images.php?u="+i++;
}
}
function getOpacity(obj) {
if (obj.filters) {
return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
} else if (obj.style.MozOpacity) { // mozilla
return obj.style.MozOpacity*100;
} else if (obj.style.KhtmlOpacity) { // konquerer
return obj.style.KhtmlOpacity;
} else { // not supported
return 0;
}
}
function setOpacity(obj, opacity) {
if (obj.filters) {
obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
} else if (obj.style.MozOpacity) { // mozilla
obj.style.MozOpacity = opacity/100;
} else if (obj.style.KhtmlOpacity) { // konquerer
obj.style.KhtmlOpacity = opacity;
}
}
Similar TutorialsHi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. http://www.muffettandsons.com/specproductstest.html Follow the link above and click on the pic to the right to open the pop up image gallery. For some reason the thumbs do not appear in the left preview pane until a rollover of the preview pane slide bar. This only occurs in IE. Firefox and Chrome both show the thumbs when opened and work just fine. Any help would be greatly appreciated... Thanks Hello. I am having trouble with a simple image gallery with navigational buttons including "first", "next", "previous", and "last"; and making a drop-down archive menu. 1. For the most part, the image gallery works. The problem is that when a user clicks on "next", and then "prev", the last image is not displayed. On the other hand, if a user clicks "prev", and then "next" the last image is displayed(works normally). 2. The way I am displaying the last image, the function last(), is not efficient. It simply refreshes the page in order to display the last image. Basic overview: The images follow a simple standard: page1, page2, page3,...page64; they are in a subfolder "img". The function changeImage() changes the image from the prev, to the next. The image gallery displays the last image in the gallery; when a user clicks on 'prev' it goes to the previous image, and go to the next image when clicked on 'next'. If the current image is the last image, and the user clicks on 'next', it goes to the very first image. Here is the code (in the <HEAD> tags): Code: <script language="JavaScript"><!--
which_image_loaded = -1;
NUMBER_OF_IMAGES = 64;
current_comic = 0;
ImageNames = new Array;
ImageNames.length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
file_number = counter + 1;
filename = ("../img/page" + file_number + ".png");
ImageNames[counter] = filename;
}
function changeImage(direction) {
which_image_loaded += direction;
current_comic = which_image_loaded + 1;
if (which_image_loaded < 0)
which_image_loaded = NUMBER_OF_IMAGES - 1;
if (which_image_loaded == NUMBER_OF_IMAGES)
which_image_loaded = 0;
if(current_comic <= 0){
which_image_loaded--;
}
document.myimage.src = ImageNames[which_image_loaded];
}
function first(){
which_image_loaded = 0;
current_comic = 1;
document.myimage.src = ImageNames[0];
}
function last(){
window.location='http://www.bearoncampus.com';
}
and in the <BODY> tags Code: <img src="img/page64.png" alt="New comic not available." name="myimage" width="725" height="275"> <form> <input type="button" value="FIRST" onClick="first()"/> <input type="button" value="PREV" onClick='changeImage(-1);' /> <input type="button" value="NEXT" onClick='changeImage(1);' /> <input type="button" value="LAST" onclick="last()" /> </form> My guess is the code is not working properly due to the initial values of the counter. Last, is there a way to display the current image "myimage.src" using a dropdown menu with each option value as each image? I have done this with window.location, but this only redirects to the image location. Much thanks. Any help is greatly appreciated. Not sure where to even start here. I am trying to build a a small JavaScript image gallery. As you can see in the jpeg image at the link provided, i want the user to be able to change the large image by clicking on the small thumbnails. The thumbnails will also have a roll over where they enlarge slightly. Complicated? I'm not a javascript expert, but i know enough by editing existing code and have saved a bunch of code i've modified. I've googled for javascript image galleries and looked through them but no success... I can understand the clicking on a thumbnail to change the larger image but what gets me is having the thumbnail on top of the larger..as well having a still image at the top left....some sorta layering? anyway some sorta help to get me started would be very helpful... http://www.rossow-web.com/test/RCC_Mockup.jpg thanks! Hi I am using the css image gallery I got from: http://www.dynamicdrive.com/style/cs...image-gallery/ I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click. Is this possible using some javascript? Hi, I'm attempting to add the following functionality to my site. Essentially, two images are displayed with a link "View More". The user clicks "View More" and the two images are replaced by two new images. This can be repeated as required. It's a basic form of slideshow I guess, but after some googling all the tutorials etc available seem to be more aimed at fully blown shows, whereas I believe my problem is much more simple. The images are contained in a directory and are numbered like so: img1.jpg, img2.jpg. img3.jpg and so on. the code I came up with so far is PHP Code: <script type="text/javascript" language="JavaScript"> start = '<img src="gallery/img'; end = '.jpg" width="150" height="200" />'; function getImage() { var n = Math.ceil(Math.random() * 10); // i have 10 images var FirstImg=(start+n+end); var n = Math.ceil(Math.random() * 10); var SecondImg=(start+n+1+end); } /* so now I think I have two variables: FirstImg = <img src="gallery/img1.jpg" width="150" height="200" /> SecondImg = <img src="gallery/img4.jpg" width="150" height="200" /> but i'm now unsure how i'd go about displaying this on the page. ideally the HTML generated would be: <div class="pics"> <p><FirstImg></p> <p><SecondImg></p> <a href="#" onClick="return getImage()">View More</a> </div> */ </script> Am I on the right lines here or am I way off?? Appreciate some pointers. thanks a lot. i'm trying to get this effect http://css-tricks.com/3458-perfect-f...kground-image/ except, instead of using an image, i would like to use a javascript image gallery. I was playing around with smoothgallery2.0 but I don't really care which I use as long as I'm just displaying images (no text) and there is a smooth fade effect (since the images are pretty high res). thanks so much in advance! Hi, I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey. Please see below: Code: <script language="JavaScript" type="text/javascript">
<!--
var interval = 1500;
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image. The buttons look like this: Code: <div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>
<div id="see-the-whole-project"> see the whole project</div>
<div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>
Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it. Thanks Gary I've been looking for a way to fade a selection of images in on load while keeping their background present until they fade in. similar to whats been used on this site: http://inventorystudio.co.uk/ thought this would be relatively simple but seems to be harder than i expected. any suggestions? I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it. The table doesn't fade in The HTML that is produced is exactly this, but the hashes are urls: Code: <table style="float:left; opacity:0; "> <tr <td> <a href="#" rel="lightbox[group]"> <img src="#" width="97" height="97" /> </a> </td> </tr> <tr> <th> </th> </tr> </table> These are my two functions Code: function addImage(src) {
var table = document.createElement("table");
table.style.float = "left";
var tr_1 = document.createElement("tr");
var td_1 = document.createElement("td");
var a_1 = document.createElement("a");
a_1.src = src;
a_1.rel = "lightbox[group]";
var img_1 = document.createElement("img");
img_1.src = src;
img_1.width = 97;
img_1.height = 97;
a_1.appendChild(img_1);
td_1.appendChild(a_1);
tr_1.appendChild(td_1);
var tr_2 = document.createElement("tr");
var th_2 = document.createElement("th");
tr_2.appendChild(th_2);
table.appendChild(tr_1);
table.appendChild(tr_2);
document.getElementById("thumbnails").appendChild(table);
if (table.filters) {
try {
table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
table.style.opacity = 0;
}
table.onload = function () {
fadeIn(table, 0);
};
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5;
var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
this is the previous addImage function: Code: function addImage(src) {
var newImg = document.createElement("img");
newImg.style.margin = "5px";
document.getElementById("thumbnails").appendChild(newImg);
if (newImg.filters) {
try {
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
newImg.style.opacity = 0;
}
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
The opacity of the table stays at 0, and never appears (but I can still click on the link) Can anyone help me make the table fade in like it was supposed to? Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela I've been trying to figure this out for days.. I just found a script that Old Pedant made which is close to what i need: http://www.clearviewarts.com/fadeBigDemo.html But two concerns: 1. how can i have it so when i click the thumbnail, it fades in a different image (rather than just a larger version of the thumbnail)? 2. how can i have it fade in and out from simply hovering over the thumbnail (rather than clicking it)? Your help would be greatly appreciated.. I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class Code: <div id="menu"> <ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li> <li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li> <li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li> </ul> </div> and here is the javascript.. (JQuery) Code: $(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});
What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6? |
|||||||