|
JavaScript - A Simple Slideable Gallery With Only Thumbnails?
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 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 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. 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. 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 Can you tell me a similar way to do this? I have a request for a lightbox that has the image which expands to fit the height or width, and also displays the thumbnails of the previous and next image. They want it to behave similar to this: http://www.karamann.com/#/interiors/...lakeshore/zoom Can someone point me to either a tutorial or an existing script? I've found dozens of lightboxes, but none with the thumbnails. I do have a lightbox that has static prev/next buttons. Is there any way I can have the script replace those buttons with thumbnails? Would this be the way to go? Please see URL: http://backstageweb.net/2011/web.htm At the bottom of the page, I want to create nav links on these thumbnail images (NOT the large main images above them) so that each portfolio piece can go to its own page that has its own descriptive text in the left sidebar. There is no HTML for the thumbnails; they are generated via .js. Can this be done? .js file attached. Better yet, if it's not too difficult, I would love to switch out the text with some cool .js code so all the functionality could be contained within this single page, instead of linking to individual HTML pages (like when you click another thumbnail, the text slides up and out of sight, and the new text slides up from the bottom to replace the former text) but I fear this may be over my head. I'll settle for the more primitive approach. Also, on a more minor issue, for some reason a thumbnail for the last list item does not display. You'll see my page displays 3, but the code contains 4: Code: <div id="maingallery">
<div id="slides">
<ul>
<li><img width="700" height="525" alt="" src="images/WebLgTerraVoce.jpg"></li>
<li><img width="700" height="525" alt="" src="images/WebLgSpca2.jpg"></li>
<li><img width="700" height="525" alt="" src="images/WebLgSalon.jpg"></li>
<li><img width="700" height="525" alt="" src="images/WebLgTerraVoce.jpg"></li>
</ul>
</div>
</div>
(I'm not too worried about this second issue, but I'd be happy to fix it if you can tell me how) Thanks for any help. John Hello, I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails. I haven't been able to find an example of this, but I was wondering if someone could point me in the correct direction to achieve this. Here is my current code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title>
<style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; }
p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
h5 { color: white; font-family: arial; font-size: 16px;}
h6 { color: white; font-family: arial; font-size: 12px; margin-top: 0px;}
a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
#container { width: 1000px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; }
#container #col1 { background: #000; height: 600px; width: 250px; float: left; }
#container #col2outer { width: 750px; float: right; margin: 0; padding: 0; }
#col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; }
#col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; }
#col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; }
#col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; }
#container #footer { float: left; width: 870px; }
</style>
<link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/virtualpaginate.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- is the accordian another script file that's missing from this list? -->
<!-- do the lightbox and accordian scripts need to be loaded in a certain order? -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox(); // Select all links in object with gallery ID
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
</head>
<body>
<div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1>
<div id="col1" align="center">
<div id="accordion">
<h2><strong>ABOUT MY WORK </strong></h2>
<div class="pane" style="display:block" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>RECENT AWARDS</strong></h2>
<div class="pane" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>PREVIOUS EXHIBITIONS</strong></h2>
<div class="pane" align="center">
<p>
Gertrude Herbert
"A Sense of Place 2010"
Augusta, GA
September 17th - November 5th, 2010
http://www.ghia.org/
</p>
</div>
<h2><strong>CONTACT INFORMATION</strong></h2>
<div class="pane" align="center">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
</div>
</div>
<div id="col2outer">
<div id="col2mid" align="center"> <p>PORTFOLIO</p>
<div id="portfolio">
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" border="0" /></a>
<h5>"Sitting Nude" 2010 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 24" x 22" x 32"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" border="0"/></a>
<h5>"Corset" 2009 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 30" x 20" x 3"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" border="0"/></a>
<h5>"Browsing 2" 2010 <p></h5>
<h6>Medium: paper crochet, book<br>
Dimensions: 8" x 11" x 10"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" border="0"/></a>
<h5>"Shaping The Void" 2009 <p></h5>
<h6>Medium: paper crochet, pencils<br>
Dimensions: 22" x 14" x 14"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a>
</div>
</div>
<!-- Pagination DIV -->
<div id="pages">
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous"><<</a>   <span class="flatview"></span>  <a href="#" rel="next" class="imglinks">>></a>
</div>
</div>
<!-- Initialize -->
<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
</div>
<div id="col2side" align="center"> <p>UPCOMING SHOWS</p>
<h6 align="left">
Cherry Creek Art Festival<br>
Denver, CO<br>
July 2nd - 4th, 2011<br>
<a href="http://www.cherryarts.org" rel="nofollow" target="_blank">http://www.cherryarts.org/</a><br><br>
</h6>
</div>
</div>
<div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div>
</body>
</html>
I'd appreciate any thoughts on how I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do. Thank you in advance!! So when the page loads the thumbnails cycle through using setInterval. When the user clicks on one of the thumbnails, it is supposed to open a new window and show the enlarged version of that thumbnail stored in bigpics. However it only comes up with a broken image link. Any ideas why this is not working? Here is the code: <html> <head> <title>Untitled</title> </head> <script language="JavaScript" type="text/javascript"> <!-- var pics = new Array() pics[0]="pict1.gif" pics[1]="pict2.gif" pics[2]="pict3.gif" pics[3]="pict4.gif" pics[4]="pict5.gif" pics[5]="pict6.gif" var bigpics = new Array() bigpics[0]="pict12.gif" bigpics[1]="pict22.gif" bigpics[2]="pict32.gif" bigpics[3]="pict42.gif" bigpics[4]="pict52.gif" bigpics[5]="pict62.gif" i=0 setInterval("slide()",500) function slide(){ if (i<pics.length) i++ if (i==pics.length) i=0 document.images[0].src=pics[i] } function enlarge(x){ w=window.open() x=bigpics[i] w.document.write("<img src='x'>") } //--> </script> <body> <img src="pict1.gif" alt="" onclick="enlarge(this)"> </body> </html> I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png Hard To Explain What I need. Looking for javascript, to do what i've hap-hazardly slapped together he I'd like to do this without having to reload a page or create a new page for each image. http://www.samivesphotography.com/redes/portraits.html Specifically the switching of the main image by the thumbnails. The difference in what i've seen online, is that i'm actually using them as a cell background. -Sam Hi, I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], ... The php script is supposed to work with the javascript, so to cover all angles here is the php Code: <?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var gallery=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
Then this javascript uses the array for a slideshow, only I want to list each image as a small thumbnail. This will allow me to view the images on my webserver much more eye friendly. Code: <script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
<div style="width: 170px; height: 160px">
<img id="slideshow" src="images/bear.gif" />
</div>
I'm not sure how to go about listing all the images. I was thinking about using definition lists and only selecting the last 10 images. I can insert images into the definition description so I thought that was my best shot. I get stuck on choosing the images from the array, I attempt something like the following Code: <img src="gallery[gallery.length-11]" /> </dd> But that looks for a file, not the array. I then modified the script to get me the most recent images (if I were to add/remove images). Does this look correct? Code: <script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
}
</script>
I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks 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. 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 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;
}
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 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 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... |
|||||||