|
JavaScript - Help Making A Simple Image Gallery
Okay, I've already learned from google how to make the following two simple image galleries:
This one displays a specific image when its link is clicked And this one displays the previous/next image for whatever's showing. (During its code, it points to this .js file.) My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.) Let me know if you need any more info from me. Similar TutorialsHello everyone, I am sorry to take up your time, I need help with some small issues, I am not familiar with java / php. I will post my problems on different threads. --- N0 1 is: I need a image gallery like this: Big image is 540px wide and beneath it is a thumbnail that activates the big image on click. I have one now but I am not satisfied with it. The link is: http://sfantipa.ro/gal_iarna.html . What I do not like is the fact that it scales the vertical images as the same weight and distorts them and I want the thumbnails to be on 1 row with before and next < > buttons or scrolled by mouse over at the left and right row, doesnt really matter which one. The thumbnail will have some space between them but they will load them as they are not scale them to predefined w/h. No text description and the thumbnails are always displayed, not hide... I am asking here because although I found many scripts, none is the one I need Can anyone help please? Thanks fokes! Hi, 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 Hi there, I am new to java script and jquery, so please use small words. so my website, threedash.com (in production), the main page has a simple fade jquery plugin, that i want to implement with a lightbox added when the user clicks on the image. I hope this wasn't too confusing.. _threedash thankyou for taking the time to read this post. Ive searched everywhere for an image gallery script which shows only thumbnails. -Ive found none =/ What i want is something like this: http://www.dhtmlgoodies.com/scripts/...ideshow-5.html BUT i do want just the small thumbnails thats slideable. The below gallery-link is what I want, but it should be sliding like the thumbnails in the above gallery so that I don't have to place 100 pictures in one page. http://www.gethifi.com/demos/jphotogrid Ive found galleries in flash, but it would be great to not have to use flash.. an1 knows about a script like the one in my description? Im not awsome at scripts. I know a little, and have tried to modify some scripts, but ive given up 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. Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this? The JavaScript: Code: //<!--
var imgList = new Array(
"images/gallery/1.jpg",
"images/gallery/2.jpg",
"images/gallery/3.jpg",
"images/gallery/5.jpg",
"images/gallery/6.jpg",
"images/gallery/duo.jpg"
);
var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);
var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";
function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#7d3d3d";
ShowMain(current_position);
}
function color_me(element,color){
element.style.color=color;
}
function Prev(){
color_me(all_links[current_position],'#000000');
if((current_position-1)>-1){
current_position=current_position-1;
}
else{
current_position=(all_links.length-1);
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function direct_selection(number){
all_links[current_position].style.color="#000000";
current_position=number;
ShowMain(current_position);
all_links[current_position].style.color="#7d3d3d";
}
function Next() {
color_me(all_links[current_position],'#000000');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function ShowMain(which){
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
document.getElementById("mainText").style.display = 'inline';
// return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->
//<!--
function preloader(){
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="images/gallery/1.jpg";
images[1]="images/gallery/2.jpg";
images[2]="images/gallery/3.jpg";
images[3]="images/gallery/5.jpg";
images[4]="images/gallery/6.jpg";
images[5]="images/gallery/duo.jpg";
// start preloading
for(i=0; i<=3; i++){
imageObj.src=images[i];
}
}
//-->
The HTML where it is displayed: Code: <img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" /> Hello.. I'm in a Web Development basics class at my College. We are about two weeks in as we've blew through HTML and CSS. Anyway.. to the question. So for this class I need to make a website with terms and their definitions. The definitions have to be in Javascript and make them show up with an alert. The problem is, I can't figure out how to have unique functions that I can somewhat link with the button. Quote: <html> <head> <script type="text/javascript"> function show_alert() { alert('term definition ONE ') } </script> </head> <body> <input type="button" value="term definition ONE " onclick="show_alert()" /> <input type="button" value="term definition TWO " onclick="show_alert()" /> </body> </html> Making a new button would just link to the script that's in the <head> giving the same definition. It's almost like I need to give each function a variable that matches up with each button, since I have multiple terms.. I hope you get what I'm trying to say. Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working. the javascript code is this: Code: $(function () {
var imgContainers = $('div.tabs > div');
imgContainers.hide().filter(':first').show();
$('div.tabs ul.number_nav a').click(function () {
imgContainers.hide();
imgContainers.filter(this.hash).show();
$('div.tabs ul.number_nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
the html file is this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>gallery</title> <!--CSS--> <link href="style.css" rel="stylesheet" type="text/css" /> <!--JavaScript--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="code.js"></script> </head> <body> <div id="gallery"><!--IMG CONTAINER START --> <div class="tabs"> <div id="image_01"> <div class="image"> <img src="image_one.png" width="795" height="395" /> </div> </div> <div id="image_02" > <div class="image"> <img src="image_two.png" width="795" height="395" /> </div> </div> <div id="image_03"> <div class="image"> <img src="and_so_on.png" width="795" height="395" /> </div> </div> <ul class="number_nav"> <li><a href="#image_01">01</a></li> <li><a href="#image_02">02</a></li> <li><a href="#image_03">03</a></li> </ul> <ul class="prev_next_nav"> <li><a href="#">Previous</a></li> / <li><a href="#">Next</a></li> </ul> </div> </div> </body> </html> here is the zip file: http://www.sendspace.com/file/we3lkd can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript... Hi I want to create an image gallery which has one main image (large size) with a series of smaller thumbnail images below. When you click on one of the smaller images below, I need it to load it into the space above. This series of images will be selected by a PHP script and a MySQL database. The ratios of the images will not always be the same, so the boundry box will need to change width and height accordingly. This will change the height of the page too I guess. Now, the real fly in the ointment is that I really would like the main image to have a drop shadow (gradient based) on all 4 sides of the image. So, good people of the JS Sub-Forum - whats the best way to get this done?! Cheers The Moose Hey all, I'm designing a website and i'm doing a section on a portfolio of artwork. wat i would like is to group the work under different headings and for each group to have a thumbnail of an image. when that image is clicked a window is opened which displays all the works in that group as thumbnails as well as an image gallery (larger image of the current image and being able to click on the other thumbnails to view a larger image of it). hope that makes sense. I've been searching all over for scripts bit nothing fits my criteria exactly. going a bit crazy over this, any help or direction much appreciated. peace Does anyone know of a good webscript slideshow on a loop that I can use in a website ? www.chagfordshow.com We don’t want a database at the moment. Needs to work in all browsers. What I’m looking for :- Change the image every few seconds. Slip into any element of the webpage. All images will be the same size. Some landscape, some portrait. Looking for this to work all in client’s scripting. or maybe AJAX Thanks. Most grateful if anyone can help 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 i just ripped stepcarousel out of my file (i never could fix the offset parent error so i just took it out) and i was looking at CMotion Image Gallery the problem is i dont need it to go side to side i need it to scroll up and down. i have a javascript element that is display as block, what im trying to do is load some videos in the box with a scroll bar. but i cannot get the scroll bar to show up. i tried overflow:scroll overflow:auto in css. i tried wrapping the videos with a div with overflow style i tried ripping out the content of the vids and putting that in a sep file and then using iframe to load it. I also tried changing the display to table other than block and even set it to none still nothing.. i do know that stepcarousel and CMotion Image Gallery at least function with their div wrap so im not sure why my div wrap is not working. but is there anything like CMotion Gallery or Stepcarousel that will force the div BUT scroll up and down. or better yet whats the best way to force a scroll div in a block.. this does not work.. Code: <div style="overflow:scroll; height:300px;"> my video content </div> i never knew it could be so hard to do the easiest thing, i have made scrollers before not sure why this one is not working. Hello guys, I spent a lot of time searching for a good image/video gallery, but didn't find, what I'm looking for. All I need is a code, that I can insert to my webpage. I need a thumbnail gallery (images or videos), that I can scroll by next/previous buttons a open it by clicking in new window. This is how LightBox and VideoLightBox work, but they don't have the next/previous buttons. I found js ImageScroller, but it can't work together with VideoLightBox... Is there anybody solving this problem? Well I found this page http://codecanyon.net/item/jquery-ho...preview/112734 but I need it even for videos. If there is a solution for both images and videos... Thanks for help, DveD I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is. Thank you Hi everyone, I'm not sure I'm posting this correctly (or if anyone is actually willing to help me out ) but I'm looking for the javascript code to create the following comparative image gallery. http://i528.photobucket.com/albums/d...evised-RBA.jpg Basically the image gallery needs to do the following. When I click on an image (small grey boxes on the bottom), that specific image will appear in the first window. When I click on another image, it will appear in the second window. And finally, click on one more image so that it appears in the third window. If I want to remove one of the images from the large window, I want to do so by clicking the clear button underneath the image I want to remove. If anyone could help me out with this, I would be EXTREMELY grateful! I'm totally stumped. Check this out: http://174.37.72.84/portfolios/engagements/ It works in FF and Safari, but not IE. Everything validates, and I'm getting no JS errors. Anybody have any ideas? 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! |
|||||||