|
JavaScript - Javascript Gallery Works In Ff But Not In Ie
Hi,
Wonder if you could help I have a js issue with i.e, my gallery works fine in ff but not in ie. Any ideas heres the link http://www.sparekeys.org.uk/ Similar TutorialsI am looking for a image gallery that will work where some photos are positioned horizontally and some are vertical. I hope it is possible. The photos are for an artist that I am working with. I hope someone will have an answer. It doesn't have to be fancy. Even a simple magnifyer would be fine. I guessed that javascript might be the most appropriate form. Thank you in advance, Buffmin.
Hey all, Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above. Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible. Thanks all. Dear Friends, I have a javascript image gallery in my website.. it is working Good.. But now i have some problem... i have to get the Loaded image url. i need users to post comments about that image. So i have to get the URL or name of image. This is needed in a text input field... So please see the code of gallery and help me.. The code is below.. Or Check it here http://www.home-palettes.com/gallery.html Code: //add thickbox to href elements that have a class of .thickbox
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
return false;
});
$("a.thickbox").css({display:"inline"});
}
function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
var images_location = 'extensions/thickbox_2'
try {
if (document.getElementById("TB_HideSelect") == null) {
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
}
if(caption==null){caption=""};
$(window).scroll(TB_position);
TB_overlaySize();
$("body").append("<div id='TB_load'><img src='"+images_location+"/loadingAnimation.gif' /></div>");
TB_load_position();
if(url.indexOf("?")!==-1){ //If there is a query string involved
var baseURL = url.substr(0, url.indexOf("?"));
}else{
var baseURL = url;
}
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'> <a href='#'>Next ></a></span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>< Prev</a></span>";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = TB_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
if (!(TB_PrevHTML == "")) {
function goPrev(){
if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}
$("#TB_prev").click(goPrev);
}
if (!(TB_NextHTML == "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}
$("#TB_next").click(goNext);
}
/*
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == "")){
document.onkeydown = "";
goNext();
}
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == "")){
document.onkeydown = "";
goPrev();
}
}
} */
TB_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(TB_remove);
$("#TB_window").css({display:"block"}); //for safari using css instead of show
}
imgPreloader.src = url;
}else{//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = TB_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
if(url.indexOf('TB_iframe') != -1){
urlNoQuery = url.split('TB_');
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='TB_showIframe()'> </iframe>");
}else{
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}
$("#TB_closeWindowButton").click(TB_remove);
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
TB_position();
if(frames['TB_iframeContent'] == undefined){//be nice to safari
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
$(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
}
}else{
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
});
}
}
$(window).resize(TB_position);
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}
} catch(e) {
alert( e );
}
}
//helper functions below
function TB_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}
function TB_remove() {
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
$("#TB_load").remove();
return false;
}
function TB_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_window").css({width:TB_WIDTH+"px",left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)+"px" });
}
function TB_overlaySize(){
if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
yScroll = window.innerHeight + window.scrollMaxY;
xScroll = window.innerWidth + window.scrollMaxX;
var deff = document.documentElement;
var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
xScroll -= (window.innerWidth - wff);
yScroll -= (window.innerHeight - hff);
} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
xScroll = document.body.scrollWidth;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
xScroll = document.body.offsetWidth;
}
$("#TB_overlay").css({"height":yScroll +"px", "width":xScroll +"px"});
$("#TB_HideSelect").css({"height":yScroll +"px","width":xScroll +"px"});
}
function TB_load_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_load")
.css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
.css({display:"block"});
}
function TB_parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
function TB_getPageScrollTop(){
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset) {
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){ // Explorer 6 Strict
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft,yScrolltop)
return arrayPageScroll;
}
function TB_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
arrayPageSize = new Array(w,h)
return arrayPageSize;
}
Hi Guys, I've been progressing along ok onthe CSS side of things but am having some trouble on the javascript side of things. I've decided to jazz a site up with a scrolling gallery from a template i'm using but unfortunately I don't know how to get the main image to change on a click of the smaller one? can anybody please help a brother out! here's the site template - http://dev.jeffking.co.uk/index.html All i'm after is the big main image to change to the same (larger) image of the smaller one in the scrollbar below the main frame. Many thanks! 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! 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. Hi guys... for my first project, me and my friend (who is a graphic artist) will make his portfolio site... I'm planning a single page website, where on the center part there will be a 960 x 500 gallery. He already have 50+ drawings ready for his gallery, the concept in my mind is for him to categorize his drawings, then those categories will become some sort of tabs, then the whole galley will occupy the said dimension above. I'm planning to display maybe around 5 thumbnails per tab, I want to make it sort of like a slide show gallery, it will also have a previous and next button then upon clicking the thumbnail, a full version of that image will pop-up but not in a new window, it will be within that page and will have a close button to go back to the main page... most portfolio sites I've seen were using this kind of preview in their gallery... How can I do this things/effect, I've read somewhere that this can be done using AJAX... Sorry if I'm not clear on what I've said as I'm still a newbie specially with this XML and AJAX thing... Thanks for having the time reading my post, looking forward for your help... ^_^ 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 Ok if you visit Event Flooring Gallery you will see that i have a js gallery with a number of images. The gallery itself is loading the images fine and you can click the buttons to seperate the images into their correct products. My problem is when i click the images the big version of the image should load but instead it gives me an error that the image may not exist or the path may be incorrect but ive checked on my laptop and every link is perfect its working fine on my laptop??? Any ideas?? Would it have anything to do with the images themselves as in they are each around 2mb or more each? Hello everyone, Sorry if this has been asked before but I couldn't fine one... I basically want a slider for my website so the user can click on the arrows overlaid onto of the image, and it will slide the image to the next one. There will need to be lots on the page at one time as it is a gallery theme website, so can't be processor hungry! Can someone point me in the right direction please? I have found several but the buttons are always on the outside of the image div. And also do not work well with more than one on the page at one time? Also... Is there a way to snap the scrolling so the mouse wheel is scrolled down, and then the page snaps to the next 'projectcontainter' div on my website? iScroll I was told is used for this buy I can't seem to find out where or how. I am new to all this javascript so any help would be appreciated! Website is located at: www.jb-design.me/marchupdate/ Thanks so much! Hi! I've been working on a javascript photo gallery on my talent agency's website. I'm running into a bit of trouble with two things... First off, i would like it that when the mouse is removed from the thumbnail, that the image the mouse was last on would remain on screen but the thumbnail wouldnt change back. Also, i cant figure out how to make it that when an image is being displayed, the photographer and makeup artist information could also be seen under the picture. Any help in this would be GREATLY appreciated! A sample of one of the pages this is being used on is the following: http://www.cyanidenation.com/dakygallery.html The code I'm using is the following: Code: <!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Thanks for the help! 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;
}
}
I hired psd2html.com to code my portfolio website because I had no idea where to start. They designed a specific gallery for me and I don't like it anymore, and it's the last thing holding my back from making my portfolio live. Here is what it looks like right now: http://www.mustlovepink.com/index2.html I attached an image that describes what I would like the gallery to look like. I don't think it's all that different, but the code is honestly such a mess that I need someone to help me with it. I don't even know where to begin If you need more information in order to tell me, feel free to let me know. I really want to get this thing figured out. 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 Hi I am new to programming have tried to write a simple HTML page and servlet. Using tomcat. Added a javascript validation function. However when I type wrong it works the first time, displays alert and returns to entry form. on second attempt type in wrong again, expected to see alert and return to entry form but it submits. I am new to programmng and could do with some help can not find any clue, answer to this problem. Have checked javascript is ticked in Firefox 5.0. Set up is I have a HTML page with one javascript check function at present for test development. It is linked to a servlet in tomcat. Problem is when I enter wrong the first time, get alert message and it returns to the HTML orginal page. However if I click on entry field and enter wrong again. It submits the form, does not give an alert or return to the orginal form? Has any one got a solution or is this how validation should work. Code is: Code: <HTML><head><title>Creation of POs</title>
<H1>Purchase Order</h1>
<script type="text/javaScript">
function check() {
check = document.forms[0].SLine1.value;
if(check=="wrong"){
alert("enter correct info");
return false;
} else {
return true; }
}
</script></head><body bgcolour="yellow">
<form method="GET" action="Distest_session30a_vs1" onSubmit="return
check()">
various inputboxes and messages
<table>
<tr><td><input type="text" name="SLine1"></td></tr>
various other lines of inputs boxes
</table>
<Input type="submit" value="Send now">
</form></body></html>
Thanks in advance for any help people can give spent a lot of time on this already and can think of nothing else to try to resolve. Using firefox 5.0, check and javascript is enabled? Basically, i am creating an expandable/collapsible menu. which works fin in FF and chrome, but not in IE. this is the code i can narrow it down to that is not working: Code: window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(eX).stop();
SqueezeBox.fromElement(el);
});
});
});
it keeps giving me errors, but when i take it out, it stops. it works in FF just fine and in chrome just fine. but in IE, it loads with errors and then the function is not working. this is the code for the actual placement of the function: Code: echo '<div class="abstract">';
echo '<div class="top">';
echo '<h2 class="gold bold md-2">';
echo wordwrap($row['vp_name'], 50, '<br>');
echo '</h2>';
echo '<span class="md">';
echo 'Hotel: ';
echo '</span>';
echo '<strong class="md">';
echo wordwrap($row['vp_hotel'], 50, '<br>');
echo '</strong>';
echo '<br />';
echo '<span class="md">';
echo 'Price Range: ';
echo '</span>';
echo '<strong class="md">';
echo $row['vp_price'];
echo '</strong>';
echo '<br />';
echo '<p>';
echo 'Details: ';
echo '<span class="expand blue">Expand</span> | <span class="collapse blue">Collapse</span>';
echo '</p>';
echo '</div>';
echo '<div style="overflow:hidden;">';
echo '<div class="more-details clear">';
echo '<ul>';
echo '<li>';
echo $row['vp_desc'];
echo '</li>';
if(!empty($row['vp_terms'])){
echo '<li>';
echo $row['vp_terms'];
echo '</li>';
}
if(!empty($row['vp_website'])){
echo '<li>';
echo '<a href="' . $row['vp_website'] . '" title="" rel="nofollow" target="_blank" class="md">Visit Website</a>';
echo '</li>';
}
echo '</ul>';
echo '</div>';
echo '</div>';
echo '</div>';
Hi, I am using googles O3D software and it uses a javascript base, one of there plugins works in Firefox only and not Internet Explorer I was wondering if anyone here could help me find out why it isnt working in IE and even how to fix it, here is the page that works in firefox but not IE http://o3d.googlecode.com/svn/trunk/...edesigner.html Many Thanks, Simon |
|||||||