photo gallery using javascript to enlarge image on click in separate window - javascript

I have implemented a photo gallery of thumbnail images that enlarge in a separate window when clicked. My problem is that once the enlarged image appears and that window is closed, the user is left at the very top of the page instead of at the location they were when they clicked the image.
Here is a snippet of the html code (the images are in a table):
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr align="center">
<td><img src="img/gallery/kitchens/thumbs/kit1thumb.jpg" width="200" height="133" border="0"></td>
<td><img src="img/gallery/kitchens/thumbs/kit2thumb.jpg" width="200" height="133" border="0"></td>
Here is the javascript I am using:
function TS_openWindow(url, name, args) {
if (typeof(popupWin) != "object"){
popupWin = window.open(url,name,args);
} else {
if (!popupWin.closed){
popupWin.location.href = url;
} else {
popupWin = window.open(url, name,args);
}
}
popupWin.focus();
}
Any help figuring out how to get the user to return to their original location within the webpage after closing the pop out window would be greatly appreciated!!

Related

Edit only javascript to add slideshow from images array

all
I have a lot of html pages on the server that opens each big image into a new window calling just one external javascript file.
I would like to edit this javascript so when I click on an image they all can be viewed using Prev and Next links buttons.
here's the html code for images:
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 1" title="image small 1"></td>
<td><img src="moreimages/imagesmall02.jpg" width="70" border="0" alt="image small 2" title="image small 2"></td>
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 3" title="image small 3"></td>
<td><img src="moreimages/imagesmall04.jpg" width="70" border="0" alt="image small 4" title="image small 4"></td>
and here's the code from javascript file:
var imagesArray = []; //array to hold all images from moreimages.html
function getImageLinks() {
var a = document.getElementsByTagName("a") //get all elements that have <a> tag
for (h in a) { // walk thru this elements
var href = a[h].attributes['href']; //from an <a> element get his href attribute
if (href) { // check if <a> tag has a href attribute
imagesArray.push(href.value); //add the value of href (image link) to the array
}
}
}
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){
LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
}
if(pos=="center"){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
}
else
if((pos!="center" && pos!="random") || pos==null){
LeftPosition=0;TopPosition=20
}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}
i think you want to make lightbox with slider
find this plugin : here

How to Exclude specific images from JavaScript Photobox animation in a div?

I am using photobox to display all images within a div in a nice gallery style. However I want to include an image in the div that I do not want in the gallery, a PDF icon, which onlick will download a pdf file. At the moment this icon appears in the gallery when clicked, I would like to know how to exclude maybe a section of the div.
Here is my code
<div id="gallery">
<td width="226" align="right"><table width="206" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="199" align="center"><img src="images/GrndFloor_dimension_th.jpg" alt="Ground Floor" width="182" height="182" border="0"/></td>
</tr>
<tr>
<td height="64" align="center" background="images/thumbs-text-holder.jpg" class="planscopy" style="background-repeat:no-repeat"><table width="151" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="104"><span class="planscopy" style="background-repeat:no-repeat">Ground Floor - Dimensions</span></td>
<td width="47" align="right"><img src="images/pdf.png" width="48" height="51"/></td>
</tr>
</table></td>
</tr>
</table></td>
</div>
<script type="text/javascript">
$('#gallery').photobox('a', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
I would like the pdf.png image not to appear in the gallery, just to be a link to the document. Is there maybe a way to exclude a div id within a div?
Any help would be greatly appreciated.
try to give the A-Element ( PDF ) a class like "exclude" and try this JS-Code:
<td width="47" align="right"><a class="exclude" href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
<script type="text/javascript">
$('#gallery').photobox('a:not(.exclude)', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
</script>
$("#gallery").photobox("a:not(:has([src$='pdf.png']))', { thumbs: true }, imageLoaded);
will work.(Demo for selector: http://jsfiddle.net/pUkz2/)
Note that the above selector is slower than if you add the class pdf to the a and use
$("#gallery").photobox("a:not(.pdf)', { thumbs: true }, imageLoaded);
I did a performance test: http://jsperf.com/pukz2

rollover one image in a DIV to get another to show up in a separate DIV

Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.
This is what i have for just the rollover:
function rollOver()
{
document.getElementById("helm").src ="images/helmOver.jpg";
}
function rollOut()
{
document.getElementById("helm").src ="images/helmStatic.jpg";
}
</script>
<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>
This is the div and image I want to show up over the photo when a pair are clicked:
<div id="glasses">
<img src="images/faceGlasses.png">
</div>
***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?
I would add
function clickedGlasses(glassesImage) {
document.getElementById("glasses_overlay").src = glassesImage;
document.getElementById("glasses_overlay").style.display = "block";
}
To your script tag at the top, and then
<img id="glasses_overlay" src="blank.png" style="display:none;">
Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)
And finally, change your "helm" img to
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />

Image fade effect for an existing javascript photo gallery

I am a photographer and I have been working on redesigning my website lately. I utilized a slideshow code that I found on a very useful website and was able to customize it to my need by removing autoplay, customization of next, prev buttons and etc... It's a simple one really and it seems to be working really well now.
But I have one question. Is it possible to add a fade effect to image transitions without completely rewriting the code? I've been searching for javascript/jquery codes for a few days now and I've come across many sites offering codes but I couldn't find any that will let me implement it into an existing gallery. Here's what my code looks like;
<body>
<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/portrait/image1.jpg", "", "Image Title 1"];
theimage[1]=["/images/portrait/image2.jpg", "", "Image Title 2"];
theimage[2]=["/images/portrait/image3.jpg", "", "Image Title 3"];
theimage[3]=["/images/portrait/image4.jpg", "", "Image Title 4"];
theimage[4]=["/images/portrait/image5.jpg", "", "Image Title 5"];
theimage[5]=["/images/portrait/image6.jpg", "", "Image Title 6"];
theimage[6]=["/images/portrait/image7.jpg", "", "Image Title 7"];
theimage[7]=["/images/portrait/image8.jpg", "", "Image Title 8"];
///// Plugin variables
playspeed=0;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
//if they want current slide number and total
document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="left">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</td>
</tr>
<tr>
<td align="left"><div id="slidebox"></div></td>
</tr>
<tr>
<td height="30px" align="left" valign="bottom">
<a style="text-decoration:none;" href="javascript:SetSlide(i-1);" onfocus="this.blur()">Prev</a> |
<a style="text-decoration:none;" margin-left:2px"; href="javascript:SetSlide(i+1);" onfocus="this.blur()">Next</a>
<div style="display:inline; margin-left:10px" align="left" id="slidecount"></div>
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
</body>
Thank you!
You can change SetSlide() to implement a fadeOut and then a fadeIn using jQuery like this:
//###########################################
function SetSlide(num, titleOnly) {
if (!titleOnly) {
//switch the image
var img = $("#imgslide");
// don't interrupt an image in transition
if (img.data("inTransition")) {
return;
}
img.data("inTransition", true);
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
img.stop(true).animate({opacity: 0}, 1000, function() {
img.attr("src", theimage[i][0]);
img.animate({opacity: 1}, 1000, function() {
img.data("inTransition", false);
});
})
}
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
//if they want current slide number and total
document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;
}
And change preloadSlide() to this:
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][3]=new Image().src=theimage[k][0];
}
}
Here's a working demo: http://jsfiddle.net/jfriend00/85nzq/
To include jQuery in your page, add this near the top right after the <body> tag before your other scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Open URL inside a div tag

I have a div tag inside a table cell and and a hyperlink tag in another cell and on i want open a specific url onmouseover on hyperlink inside the div tag.the url is to my pdf file.Please anyone tell me how can i do this thorugh Javascript or anyother method
Something like this:
<table>
<tr>
<td>
google
</td>
<td>
<div id="div1" style="width:400px;height:200px;border:1px solid #ddd;"></div>
</td>
</tr>
</table>
<script>
function previewUrl(url,target){
//use timeout coz mousehover fires several times
clearTimeout(window.ht);
window.ht = setTimeout(function(){
var div = document.getElementById(target);
div.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
},20);
}
</script>
If you mean you want to open a new page on mouse over, then:
//add onmouseover to your hyperlink
<a href="#" onMouseOver="open_new_window(url);">Open Hover Window
//then js
function open_new_window(url) {
window.open(url,"some_name","width=300,height=200,left=10,top=10");
}
Did you mean something like that

Categories