JavaScript - Images In Gallery Popups Do Not Show In Ie
I have several 'galleries' for each artist on my website. Clicking on each thumbnail opens a popup window with a larger image and details. It works fine on all the browsers except IE. What do I need to add/subtract/alter so that it works in IE? Tried to find the solution with the other threads, but without success. Here's the website:
http://artsenses.co.uk I will be eternally thankful for any help! Similar TutorialsDear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles hi i would like to create gallery of 6 images that will show random images on page reload without repeating them. am not good in js so any help would be great. i found some code on web, just changed path for images and added lightbox code. it looks like this, but it shows same image few times. Code: <script language="JavaScript"> <!-- /* Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) Over 400+ free JavaScripts here! Keep this notice intact please */ var myimages=new Array() //specify random images below. You can have as many as you wish myimages[1]="images/gallery/1.jpg" myimages[2]="images/gallery/2.jpg" myimages[3]="images/gallery/3.jpg" myimages[4]="images/gallery/4.jpg" myimages[5]="images/gallery/5.jpg" myimages[6]="images/gallery/6.jpg" for (i = 0; i < 6; i++) { var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href="'+myimages[ry]+'" rel="lightbox"><img src="'+myimages[ry]+'">') } //--> </script> thanks I am having a problem with making the images come back after they are hidden by the hide me css. Html Code: <div class="photo_container"> <div class="sorting"> <div> <span>Filter photos by</span> <a class="sortLink selected" data-keyword="all" href="#">All categories</a> <a class="sortLink" data-keyword="creative" href="#">Creative</a> <a class="sortLink" data-keyword="portrait" href="#">Portrait</a> <a class="sortLink" data-keyword="event" href="#">Event</a> <a class="sortLink" data-keyword="advertising" href="#">Advertising</a> <a class="sortLink" data-keyword="nature" href="#">Nature</a> <a class="sortLink" data-keyword="architecture" href="#">Architecture</a> <a class="sortLink" data-keyword="model" href="#">Model</a> <a class="sortLink" data-keyword="food" href="#">Food</a> <div class="clear-fix"></div> </div> </div> <div class="photos"> <div class="thumbnail_container"> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> </div> </div> <div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div> <div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div> </div> Javascript Code: var thumbnailSpacing = 15; $(document).ready(function(){ $('.photo_container .sorting a.sortLink').on('click', function(e){ e.preventDefault(); $('.photo_container .sorting div a.sortLink').removeClass('selected'); $(this).addClass('selected'); var keyword = $(this).attr('data-keyword'); alert(keyword +' keywordset sort link'); sortThumbnails(keyword); }); $('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px'); $('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe'); positionThumbnails(); }); function sortThumbnails (keyword){ //alert(keyword); $('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){ var thumbnailKeywords = $(this).attr('data-keywords'); //alert(thumbnailKeywords +' keyword thumbs'); if(keyword == 'all'){ $(this).addClass('showMe').removeClass('hideMe'); }else{ if(thumbnailKeywords.indexOf(keyword) != -1){ //alert(thumbnailKeywords.indexOf(keyword) +' index keyword'); $(this).addClass('showMe').removeClass('hideMe'); }else{ $(this).addClass('hideMe').removeClass('showMe'); } } }); positionThumbnails(); }; function positionThumbnails(){ /* debug */ $('.debug-remainder').html(''); $('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){ $(this).css({ 'display':none, 'top':'0px', 'left':'0px' }); }); var containerWidth = $('.photo_container .photos').width(); var thumbnail_R = 0; var thumbnail_C = 0; var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing; var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing; var max_C = Math.floor(containerWidth / thumbnailWidth); $('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){ var remainder = (index%max_C)/100; var maxIndex = 0; /* debug */ $('.photo_container .debug-remainder').append(remainder+' - '); if(remainder == 0){ if(index != 0){ thumbnail_R += thumbnailHeight; } thumbnail_C = 0; }else{ thumbnail_C += thumbnailWidth; } $(this).css('display','block').animate({ 'opaciry':1, 'top':thumbnail_R+'px', 'left':thumbnail_C+'px' }, 500); var newWidth = max_C + thumbnailWidth; var newHeight = thumbnail_R + thumbnailHeight; $('.photo_container .photos .thumbnail_container').css({ 'width': newWidth + 'px', 'height': newHeight + 'px' }); }); } Thank you ahead of time for any help given... my brain hurts! Posted this in the wrong forum earlier. I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads. Any help would be appreciated. PLEASE! I NEED HELP! I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem. Here is the Slideshow.js code Code: var $$ = $.fn; $$.extend({ SplitID : function() { return this.attr('id').split('-').pop(); }, Slideshow : { Ready : function() { $('div.tmpSlideshowControl') .hover( function() { $(this).addClass('tmpSlideshowControlOn'); }, function() { $(this).removeClass('tmpSlideshowControlOn'); } ) .click( function() { $$.Slideshow.Interrupted = true; $('div.tmpSlide').hide(); $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive'); $('div#tmpSlide-' + $(this).SplitID()).show() $(this).addClass('tmpSlideshowControlActive'); } ); this.Counter = 1; this.Interrupted = false; this.Transition(); }, Transition : function() { if (this.Interrupted) { return; } this.Last = this.Counter - 1; if (this.Last < 1) { this.Last = 3; } $('div#tmpSlide-' + this.Last).fadeOut( 'slow', function() { $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive'); $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive'); $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow'); $$.Slideshow.Counter++; if ($$.Slideshow.Counter > 3) { $$.Slideshow.Counter = 1; } setTimeout('$$.Slideshow.Transition();', 4000); } ); } } }); $(document).ready( function() { $$.Slideshow.Ready(); } ); The html code for the pages looks like this: Code: <div id='tmpSlideshow'> <div id='tmpSlide-1' class='tmpSlide'> <div class="banner1"> <div class="clear"> <div class="banner_inner"> <div class="clear"> <p>Care for the whole family</p> </div> <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div> <div class="clear"> <ul> <li>Newborn Care</li> <li>Children</li> <li>Teenagers</li> <li>Young Adults</li> <li>Seniors</li> </ul> </div> </div> </div> </div> </div> <div id='tmpSlide-2' class='tmpSlide'> <div class="banner2"> <div class="clear"> <div class="banner_inner"> <div class="clear"> <p>Care for the whole family</p> </div> <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div> <div class="clear"> <ul> <li>Newborn Care</li> <li>Children</li> <li>Teenagers</li> <li>Young Adults</li> <li>Seniors</li> </ul> </div> </div> </div> </div> </div> <div id='tmpSlide-3' class='tmpSlide'> <div class="banner3"> <div class="clear"> <div class="banner_inner"> <div class="clear"> <p>Care for the whole family</p> </div> <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div> <div class="clear"> <ul> <li>Newborn Care</li> <li>Children</li> <li>Teenagers</li> <li>Young Adults</li> <li>Seniors</li> </ul> </div> </div> </div> </div> </div> <div id='tmpSlide-4' class='tmpSlide'> <div class="banner4"> <div class="banner"> <div class="banner_inner"> <div class="clear"> <p>Care for the whole family</p> </div> <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div> <div class="clear"> <ul> <li>Newborn Care</li> <li>Children</li> <li>Teenagers</li> <li>Young Adults</li> <li>Seniors</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div> </div> </div> <div id='tmpSlide-5' class='tmpSlide'> <div class="banner5"> <div class="clear"> <div class="banner_inner"> <div class="clear"> <p>Care for the whole family</p> </div> <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div> <div class="clear"> <ul> <li>Weight Loss</li> <li>Fit for Life</li> </ul> </div> </div> </div> </div> </div> Hey guys, I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img. here's the script... <script language="javascript"> function showone(x) { document.getElementByName('a').style.display='none'; document.getElementByName('b').style.display='none'; document.getElementByName('c').style.display='none'; document.getElementByName(x).style.display='block'; } </script> and the code... <a href="#" onClick="showone('a'); ">show CAT. A</a><br> <a href="#" onClick="showone('b'); ">show CAT. B</a><br> <a href="#" onClick="showone('c'); ">show CAT. C</a><br> <a href="#">show all cats</a><br> <br> <img name="a" src="imgs/a1.jpg" /><br> <img name="b" src="imgs/b1.jpg" /><br> <img name="a" src="imgs/a2.jpg" /><br> <img name="a" src="imgs/a3.jpg" /><br> <img name="b" src="imgs/b2.jpg" /><br> <img name="c" src="imgs/c1.jpg" /> Here's what it looks like... http://mattfalcone.com/tests/showhide.html except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it. Hello all, I need some help with pagination on the web page that am working right now. There are images(more than 50) on this page which I want to show as gallery. Each image has few details about the photograph beside it. Right now all these images and details are shown in a single page one after the other with div's and am setting these div tags using JS array. I have found several javascripts in google which can do pagination/ gallery for simple images. But my problem is these are not simple images but zoomable images. So when am using these scripts my first zoomable image is shown properly. But from next image, the details of the photo are changing but my zoomable image is not loading. I am fairly new to JS. It would be great if someone can point in right direction. I am exploring Spry Widgets to do this but wanted to know if there is any other simple or better way to do it. Thanks in Advance, Shravanthi I have 3 pop-ups on a particular page, but when I click any of the 3, they all show up as the same one (the 'form' one, whereas they should be 3 different ones). What do I need to change? Here is the 1st one (triggered by clicking 'Pre-purchase pest inspections'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("timberpest.html","timberpest","width=800,height=850,left=0,top=0,toolbar=no,location=no ,directories=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <li><a onmouseover="window.status='Pre-Purchase Timber Pest Inspections >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Pre-purchase pest inspections</a></li> Here is the 2nd one (triggered by clicking the image 'img7.jpg'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("form/form.html","form","width=700,height=1400,left=0,top=0,toolbar=no,location=no,directories=no,status=y es,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <td class="bg10"><div align="center"><a onmouseover="window.status='Request Form >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()"><img src="images/img7.jpg" alt="" width="177" height="345" border="0" /></a></div> And here is the 3rd one (triggered by clicking 'Read more...'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("About.html","about","width=778,height=650,left=0,top=0,toolbar=no,location=no,directori es=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <a onmouseover="window.status='About Us >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Read more...</a> Hey guys I'll try to do my best to explain what I want. Im using a self hosted wordpress and I want to add and image link in one of my sidebars. Code: Code: <a href="http://www.espn.com" target="_blank"> <img src="ahman.gif"> </a> So When someone click on the image I want a box to appear in same window with all the buttons above(facebook,twitter,Gplus,Digg,StumbleUpon ....(the script for the button is down there )) like that(I want A shadow also) http://oi42.tinypic.com/j0vi1i.jpg After that I want all the bookmarks to be done in this box and not in different window. After the bookmark is done I want to show a thank you message in this box Hope you guys Understood. I dont think is complicated but for me it is The bookmarking script is Here http://newsand-reviews.com/javascript.txt Thank million times for help. If you can help me even with half of this I'll be pretty happy Hello. Im trying to put in a Popup printer-friendly page on my site. the Popup works great in Chrome and FireFox. It even works in IE - except im getting a black bg instead of the white i get in the other browsers. Also the print command is not working in Firefox or IE. Im running FireFox 8 and IE 9. heres the code for the Popup: Code: <script language="javascript" type="text/javascript"> <!-- function popitup(url) { newwindow=window.open(url,'name','height=200,width=150'); if (window.focus) {newwindow.focus()} return false; } // --> </script> </head> <div> <img src="IMAGES/BidsCouponSmall-text.png" /> <br /> <br /> <a href="printcoupon.htm" target="coupon" onclick="window.open('printcoupon.htm','coupon','height=500, width=400,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no'); return false;" >Click HERE To Print</a> <br /> </div> To avoid cluttering of this post, the page im having printing problems with can be found he http://bidsservice.net/printcoupon.htm its all html, css, and JS. no server-side code. I found this script while browsing a site: Code: <script language="JavaScript"> <!-- if(popUpsBlocked) alert('Our site uses Pop-Ups.\nPlease enable Pop-Ups for this website.'); } //--> </script> But when I added it to my site, it wont work. Discuss and find a soulution....... I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons. When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div. I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text. And if three divs are popped up and if I close the second one, the third should get attach to first popup. Hope, you'll understand my requirements, and will provide a suitable code in javascript. I have a tracking ad at the bottom of my site. (no iframes). how do I know and/or prevent that tracking ad from popping up a popup? They are not suppose to, but I suspect they do. Is there a way to track this, or perhaps prevent them from popping the popup from within my page? I have access to various libraries, prototype/jquery etc.. so if there is a func/method in those, I could use too. I'm trying to do what they are saying at this link: http://blogs.sitepoint.com/perfect-pop-up/ First, they tell me to do what is listed under the "Scripting Disabled" section: <a href="file.htm" onclick="window.open('file.htm'); <br> return false;" rel="nofollow" target="newWin"> Then, down in the page in the "The Perfect Pop-Up Script" section it has a large script for me to use. I'm wanting to use it at my page http://www.best-stock-trading-system...ng-system.html I want to make each of my images pop up windows like at this site: http://www.polyvore.com/cgi/shop?query=shoes So, are they telling me to use the html in both sections? Where would I put the html in the top section vs. the script in the lower section? Do I have to make another webpage and just paste the script in there and then call it, like they say below: "To call the function you would use the following code:" <a href="my-pop-up-window.htm" <br> onclick="popUp(this.href,'console',400,200);return false;" <br> rel="nofollow" target="_blank">This is my link</a> I'm a bit confused where I am supposed to inserting the page name for the popup that I want to pop up vs inserting the pagename for the script page that I guess I have to make. So what are the steps that I would take to do all of this?! Thank you for your help! I'm a complete newbie so please excuse me if this is obvious. I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window. Here's my form <select name="parms"> <option value="AirTemp.jpg">AirTemp</option> <option value="Humidity.jpg">Humidity</option> <option value="Windspeed.jpg">Wind Speed</option> </select> Many thanks. 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 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? 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; } |