|
JavaScript - Two Links To Instantiate The Same Gallery In Lightwindow
Hello there everyone!
I am currently rebuilding my portfolio and utilizing lightwindow as a means to display my projects. I have set up the site so that there is a grid of thumbnail images and also a textual list of links (basically another means for the user to navigate the projects if they prefer not to use the thumbnail links). For some projects I need to use the gallery function to display multiple images. I have this functioning when you click on the thumbnail link just fine. The problem is having the corresponding text link utilize the same set of images without creating a duplicate set. Is there a way to call the gallery without putting links to each image utilizing "class" and "rel". Here is a brief section of the html to show you what I mean...I have minimized it to show you clearly what I am trying to do... Code: <!-- Text List of Links to Projects -->
<div id="subNav" style="display:none;">
<ul>
<li class="listHeader">Web & Interactive</li>
<li>
<a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a>
</li>
</ul>
</div>
<!-- Thumbnail Image Links to Projects -->
<div id="portfolioContent">
<div id="thumbnail">
<!-- Set of Images to be used in gallery-->
<a href="imgs/gallery/projectName/proj2A.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]">
<img src="imgs/thumbnails/project1.jpg" alt="Project Name" />
</a>
<a href="imgs/gallery/projectName/proj2B.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]"></a>
<a href="imgs/gallery/projectName/proj2C.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]"></a>
</div>
</div>
I want to call that same set of 3 images with the text link <a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a> Right now it's just showing the one image...if I use the rel tag in that link, it adds the image as a duplicate and then says there are 4 images in the set instead of 3. Does this make sense to anyone. How can I pull this same gallery up without duplicating the images or having the same project show up twice when you click on the gallery tab. View actual site in progress at: http://www.reneeclements.com/newWebs...sign/index.php Any insight would be greatly appreciated! Thanks! Reply With Quote Similar TutorialsI've got this little chunk of code running on my freelance portfolio site - on each page (different sections of my portfolio) I have 6 thumbnails and a full sized graphic with some descriptive info, you click the thumbnail and it switches the graphic and other info, that all works fine. But on one page I have some web stuff and I'd like to make the var 'clientinfo' into a link to go to the client's website. I know I need to add an array with the website links, but then I'm not sure how to implement it into the html, I've tried various things I've found on here but I'm not getting anywhere on my own. I know it's something pretty simple (for someone who knows what they're doing) but I just can't seem to grasp it. Can anyone help? the js is like this: $(function() { $(".image").click(function() { var image = $(this).attr("rel"); var title = $(this).attr("title"); var description = $(this).attr("content"); var clientinfo = $(this).attr("clientinfo"); $('#gallery').hide(); $('#gallery').fadeIn('slow'); $('#image').html('<img src="' + image + '"/>'); $('#title').html(title); $('#description').html(description); $('#client').html(clientinfo); return false; }); and then the HTML anchors are like this: <a href="#" rel="images/gallery/web/site1.png" title="Site One" content="This is the descriptive info for site number one" clientinfo="Site One link" class="image"><img src="images/gallery/web/t_site1thumb.png" class="thumb" border="0"/></a> Hello everyone, I was wanting to know how you add links to Adobe Lightroom gallery photos? Here is the xml gallery code I am trying to add links to: <?xml version="1.0" encoding="UTF-8"?> <simpleviewerGallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="1" stagePadding="40" thumbnailColumns="2" thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="images/" thumbPath="thumb/"> <image> <filename>1.jpg</filename> <caption></caption> </image> <image> <filename>2.jpg</filename> <caption></caption> </image> <image> <filename>3.jpg</filename> <caption></caption> </image> <image> <filename>4.jpg</filename> <caption></caption> </image> <image> <filename>5.jpg</filename> <caption></caption> </image> <image> <filename>6.jpg</filename> <caption></caption> </image> <image> <filename>7.jpg</filename> <caption></caption> </image> <image> <filename>8.jpg</filename> <caption></caption> </image> <image> <filename>9.jpg</filename> <caption></caption> </image> </simpleviewerGallery> I have Adobe Lightroom 3. So far browsing through various tutorials and help notes I have not found a way to do this. However, I am hoping there is in fact a way to do this. Here is the actual flash simpleviewer gallery uploaded I have uploaded for a visual example. http://www.iandmyself.me I would simply like to add links to the photos once they are clicked. I'm trying to integrate two different scripts, one being a PHP/CSS form (this part seems to be working fine) with a LightWindow script built by Kevin Miller: http://www.stickmanlabs.com/lightwindow/ I have installed the lightwindow script at: http://www.mikeandzachsbbq.com/Catering/ The Click Here link in the second paragraph opens the lightwindow, which shows the PHP form, located at http://www.mikeandzachsbbq.com/Catering/form.php If you go to form.php directly and fill out the form, it sends with no issues. However, if you fill out the form inside the lightwindow and click send, while it says that it sent successfully, no email is ever received. I've tried different form methods using the lighbox script, neither GET nor POST will make the email send inside the lightwindow. Anyone have any ideas? I'll try anything to get it working, or attach any needed files. Thanks a lot. Chris I'm not great with javascript and I'd appreciate any help or guidance. I'm using jquery colorbox to open a window when the page loads. However there is also a video player that automatically plays at the same time (flash). I'm trying to figure out how to modify the colorbox code so that the containing div for the video is initially hidden from view until the colorbox window is closed. The function to initialize it is: Code: $(document).ready(function() {
$.fn.colorbox({href:"#inline_example1", width:"33%", inline:true, open:true});
});
Which I thought is where code should go to initially hide the div? Then I'm not sure but inside the actual colorbox code there is a function for closing the window. Is there a way to attach an event to that closing function that will change the hidden div to being visible? Code: $overlay.click(function () {
if (settings.overlayClose) {
publicMethod.close();
}
});
I have some java script in my vb.net application and I've been trying to figure out why my web app keeps crashing when i try to instantiate an array (i placed a comment where the app is crashing in the code below). Here's my code... Code: function CopyItem(plyrDuplicate,copyPlyrPostback)
{
var plyrDuplicate = (typeof plyrDuplicate == "undefined")?'defaultValue':plyrDuplicate;
var firstListBox = document.getElementById('<%= lstPlayerSelect.ClientID %>');
var secondListBox = document.getElementById('<%= lstPlayerQueue.ClientID %>');
var postBack = -1;
if (copyPlyrPostback == 0){
postBack = 0;
}
//alert("in the function");
//alert(postBack);
if (postBack == -1)
{
for (var i = 0; i < firstListBox.options.length; i++)
{
if (firstListBox.options[i].selected)
{
var newOption = document.createElement("option");
newOption.text = firstListBox.options[i].text;
newOption.value = firstListBox.options[i].value;
playerVal = newOption.value;
CheckDuplicate(playerVal);
var printRec = CheckDuplicate(playerVal);
alert(playerVal);
alert(CheckDuplicate(playerVal));
if (printRec != true)
{
//alert(secondListBox.options[secondListBox.options.length]);
//alert(secondListBox.options.length);
secondListBox.options[secondListBox.options.length] = newOption;
}
}
}
if (document.getElementById('ErrorMsg').style.display = 'inherit')
{
document.getElementById('ErrorMsg').style.display = 'none';
}
}
else
{
alert("inside other else block, hurray~!!!");
hdnSessionVariable = '<%=Session("playerId")%>';
hdnSessionVariable = hdnSessionVariable.split(",");
for (var ii = 0; ii < hdnSessionVariable.length; ii++)
{
for (var i = 0; i < firstListBox.options.length; i++)
{
if (hdnSessionVariable[ii] == firstListBox.options[i].value)
{
//alert("we have a match!!!");
var newOption = document.createElement("option");
newOption.text = firstListBox.options[i].text;
newOption.value = firstListBox.options[i].value;
playerVal = newOption.value;
CheckDuplicate(playerVal);
var printRec = CheckDuplicate(playerVal);
alert(playerVal);
alert(CheckDuplicate(playerVal));
alert(newOption.value);
if (printRec != true) {
secondListBox.options[secondListBox.options.length] = newOption; //app crashes on this line
}
}
}
}
Updatelist();
return false;
}
Hopefully the code above is enough for to figure out the issue. However, here's a mini recap of what's going on. A user selected a value from firstListBox and the function above copies it over to secondListBox. The code in the first condition works fine, but the code in the else block doesn't. Now, here's the catch/difference between the if and else statement...the Else block is basically doing the same thing as the if statement, except the values that needs to be copied are coming from a session variable (hdnSessionVariable = '<%=Session("playerId")%>'. I've commented out every line in the else statement and the app works until it hits the secondListBox.options[secondListBox.options.length] = newOption line. Anybody have any idea what's wrong here? hi! i know little about programming, or javascript... ...i've set up several lightwindows on a site... ...fine in all browsers except IE (8 for sure, maybe others too...) ...the lightwindows load normally the first time they are clicked, but if they are closed and opened again, on the 2nd or subsequent times the window opens up at the bottom and an extra 'secret panel' (!) appears... ...in it it says, 'Null' on the left hand side, and 'by null', almost like a signature, on the right! The IE error message assoc. with this is: Message: 'null' is null or not an object Line: 5 Char: 5280 Code: 0 URI: http://www.kabeoke.com/swfobject.js And the FF error console (even though it works fine in FF...) says this: Error: $("lightwindow_image_" + i) is null Source File: http://www.p51labs.com/lightwindow/c...ipt.js,html.js Line: 5595 So the error is really specific to IE, and seems to involve javascript... ...can anyone help? Many Thanks 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 Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? 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 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... 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 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 Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work???? Code: <script type="text/javascript">
jQuery(document).ready(function(){
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<div class="hidden">
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
});
});
</script>
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. Hello, Any suggestions for how to make this sort of gallery - http://www.timsimmons.co.uk/index.php ? I am making a website for a friends degree show and really like the minimal aesthetic. I'm not a fan of the usual JS plugin galleries. One thing I can't work out how they have done is link the text caption above to the images. This has been niggling at me for days! I am new to JS so please go easy on me. Cheers, Andy I've tried hosting my WIP website to see how it works. Everything goes well except for the following: On my Portfolio page: [Portfolio] I have coded a "gallery" in jquery. When the page starts loading it seems that the browser loads the ` Code: #portfolioSlider ` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading. How can I make the ` Code: #portfolioSlider ` images start loading only after it opens? Thanks in advance! Im new to javascript and I need to make a website for my computer science class that includes a photo gallery within a table and there has to be two buttons on top so you can scroll through the pictures.. a next and a back button. here is a link to the assignment http://montcs.bloomu.edu/110/Asns/As...-changer.shtml.. here is our teachers example http://myweb.bloomu.edu/rmontant/pictures-project.. I tried to make my website but i am stuck! heres the code for mine and if anybody could tell me what the hell im doing wrong it would be greatly appreciated.. Thanks in advance <html> <head> <title>GMC Duramax Photo Gallery</title> <style type="text/css"> p.pretty{ font-family: "Marker SD" ; font-size: 20pt ; } Img#pix { width:800px;} table {border-collapse: collapse; border: 8px inset rgb(255,140,0); width:800px; background: rgb(0,0,128); color: rgb(255,255,255); } td {border: 1px solid black; text-align: center;} </style> <script type="text/javascript"> var piclist = [ "Chevy1.jpg" , "GMC1.jpg" , "Ironhide.jpg" , "Chevy2.jpg" , "Monster.jpg" , "DenaliHD.jpg" , "DenaliHD1.jpg" , "3500HD.jpeg" , ] Var i = 0; function next() { var elt = document.getElementById "Chevy1.jpg", "GMC1.jpg", "Ironhjide.jpg", "Chevy2.jpg" el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" +i+ ":" piclist[i] ; i=i+ 1;/ if (i>=piclist.length) i = 0; } function prev() { var elt = document.getElementById("pix") ; el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" -i- ":" piclist[i] ; i=i+ 1;/" Comment: This counts UP, to next picture. "/ if (i>=piclist.length) i = 0; } </script> </head> <body> <p class="pretty"> GMC Trucks </p> <table> <tr><td> <button onclick="prev();"> Backward </button> <button onclick="next();"> Forward</button> </td></tr> <tr><td> <img id="chevy1.jpg" src="Chevy1.jpg"> </td></tr> <tr><td id="caption"> Lifted Chevy 2500HD</td></tr> </table> </body> </html> I know I posted this in the Javascript section, and if this is not right, I am sorry, please let me know so I can post it in the right area. I am looking to create an image gallery on my website. i am decent at coding, but need some help. I am looking for a code to where I can have a gallery to every picture inside the folder. say I have 100 pictures in a folder named "pics123" on my server. Is there a way to code a gallery to where every picture in the folder will appear in the gallery without putting every image in the coding? thanks! 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/ |
|||||||