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>
Related
I am trying to position a 'random' image into a table column. Basically, I select the image based on the second that the the page is loaded - so 60 images available. The image selects and displays but locates itself at the page edge rather then the table edge.
I am going round in circles. Any hints on how to achieve this please? I am writing in HTML4 - I know very little about HTML5. The image width size is 480px, the column width in the table is 615px.
Here is my code.. with some debugs commented out.
Thanks
Martyn
Introduction
<script>
var d = new Date();
var n = d.getSeconds();
var n = "hdrimages/"+n+".jpg"
var img = document.createElement("img");
img.src = n
//document.getElementById("hdrimage").innerHTML = img.src;
//document.getElementById("hdrimage").style.cssFloat = "right";
//hdrimage.style.float = “right”;
document.body.appendChild(img);
</script>
</td>
<td width="40%" align="left" valign="top">
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2></td>
you can do something like following
<table>
<tr>
<td id="img-cell"></td>
</tr>
</table>
and on JS part you can do
document.getElementById('img-cell').appendChild(img);
This is because you are appending the image to the body and not the table element
Your current code only adds the image to the end of the body tag.
You need to add your image to the table data cell tag.
To do this, give your table data cell an id so you can find it then it,s easy to add:
<td id="myawesometabledatacell" width="40%" align="left" valign="top">
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2>
</td>
<script>
var d=new Date();
var n=d.getSeconds();
var n='hdrimages/'+n+'.jpg'
var img=document.createElement('img');
img.src=n
document.getElementById('myawesometabledatacell').appendChild(img);
</script>
I hope this helps.
I'm a novice at jquery/javascript, so apologies in advance if this is a dumb question.
I have 3 images and I want to be able to change their position when a user clicks either the second or the third one. For example, if the user clicks image #2, I want image #2 to become image #1 (left-most), then image #3 becomes image #2 (middle) and finally image #1 becomes image #3 (right-most). If the user clicks image #3, I want image #3 to become image #1 (left-most), then image #1 becomes image #2 (middle) and finally image #2 becomes image #3 (right-most).
If the user clicks the first image, I don't want anything to happen.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ImageSwap</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var img = new Array("http://i.imgur.com/QWso5yB.png", "http://i.imgur.com/O4X3egC.png", "http://i.imgur.com/w3p2qLp.png");
$('#first').bind('click', firstChannel);
$('#second').bind('click', secondChannel);
});
function firstChannel() {
var tempImg = img[0];
img[1] = img[2];
img[2] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
function secondChannel() {
var tempImg = img[0];
img[0] = img[2];
img[2] = img[1];
img[1] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
</script>
</head>
<body>
<img id="home" src="http://i.imgur.com/QWso5yB.png">
<img id="first" src="http://i.imgur.com/O4X3egC.png">
<img id="second" src="http://i.imgur.com/w3p2qLp.png">
</body>
</html>
When clicking the 2nd and 3rd images, nothing happens. What the heck am I doing wrong here? Is there an easier way to do this? I've been pulling my hair out searching everywhere but can't seem to find an answer. Many thanks in advance for any feedback you can give me...
Why not make it simple? jsBin demo
A parent element:
<div id="channels">
<img src="http://i.imgur.com/QWso5yB.png">
<img src="http://i.imgur.com/O4X3egC.png">
<img src="http://i.imgur.com/w3p2qLp.png">
</div>
and some prepend():
$(function () {
var $chn = $("#channels");
$chn.on("click","img", function(){
$chn.prepend( this );
});
});
I mean, if the first image represents the current channel, than all you need to do (as above) is to prepend the clicked element. To style the first element simply use CSS img:first-child
EDIT: KEEP ORDER
jsBin demo with Order
If appending creates at some point a mess of channels order,
I'd suggest you to:
Create a MAIN or currently watching big image and place all channels inside a parent:
<img id="current">
<div id="channels">
<img src="//placehold.it/90x40/a7b&text=1">
<img src="//placehold.it/90x40/ba7&text=2">
<img src="//placehold.it/90x40/7ba&text=3">
<img src="//placehold.it/90x40/bb7&text=4">
<img src="//placehold.it/90x40/77a&text=5">
<img src="//placehold.it/90x40/ab7&text=6">
</div>
Than on a channel-click, set the clicked image src to the BIG image, and hide the clicked one:
$(function () {
var $img = $("#channels").find("img");
var $current = $("#current"); // The big image
$img.on("click", function(){
$current[0].src = this.src;
$img.show();
$(this).hide();
}).eq(0).click();
});
Example with a better UI
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!!
This should be easy but it's not working properly... I am quite rusty on javascript and can't figure out what it is I am missing.
I have a navbar that I'd like to disappear when person clicks on small arrow, leaving just a 2nd arrow. When user clicks on 2nd arrow, nav bar reappears. All of the navbar is in one tag. The nav menu itself is quite long, one reason, I want to give user ability to toggle it on and off.
Javascript function in head is as follows:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><img src="arrow.gif"></td>';
}</script>
Text on page is:
<div id='navbar'>
<td>
<img src="arrow.gif">
</td>
</div>
Placing id in the div tag, it shows the arrow when you click on the link but doesn't remove the old html between the div tags. Same thing using span instead of div and no difference between single and double quotes. When I move the id="navbar" to the tag, the nav bar does disappear but it leaves the background color unchanged for the size of the old td tag. I would like it to go blank except for tiny arrow. So question 1 is why are div and span not working, or alternatively, td leaving background color in old space.
2nd question is how to specify innerHTM in text through a variable. It would be nice not to have to put this all in function in header.
Thanks for any ideas!
Don't know what a jsfiddle is but following code reproduces problem if put in .htm file. Thx.
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>
Following leaves one line of background expand gif. Moving the gif outside the div throws off cell alignment. Realize that tables are no longer considered best practice but redoing table structure of whole site would be large undertaking.
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>
Can anybody help me letting me know what is wrong with the following code?
$(document).ready(function(){
$("img").attr("alt")=='minimize'.click(function(){
alert("he");
});
});
thanks.
Addition:
Sorry guys, I am trying to add an event to a image inside of a table, so when its clicked it collapse the div under need.
I am facing several problems here.
1.- all tables and div use the same class.
2.- it may be a minimum of two tables and divs.
3.- first table should no be click able, only its images (for show and hide div under)
4.- rest of tables should be click able the whole table to show and hide div under with slidetoggle.
5.- rest of tables also have two images for show with slideDown and slideUp.
What I have it works but not fully.
Once again.
Thanks.
so far this is what I have.
<script type="text/javascript">
$(document).ready(function(){
$(".heading:not(#Container1)").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
$(document).ready(function(){
$("img[alt='min']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
$("img[alt='max']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
</script>
<html>
<head></head>
<body>
<table class="heading" id="container1">
<tr>
<td>heading1</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container1</div>
<table class="heading">
<tr>
<td>heading2</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container2</div>
<table class="heading">
<tr>
<td>heading3</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container3</div>
</body>
</html>
You need to use the attribute selector not get the attribute and compare it.
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
EDIT
$(function() {
$('img[alt='min'], img[alt='max']').click(function() {
var container = $(this).parent('table').next('div.container');
if ( $(this).attr('alt') == 'min' )
container.slideUp('slow');
if ( $(this).attr('alt') == 'max' )
container.slideDown('slow');
return false;
});
$('table.heading:not(:first)').click(function() {
$(this).next('div.container').slideToggle('slow');
return false;
});
});
The alt attribute is not a way to filter your images. It is designed to put alternative content for when the image cannot be displayed (not found, unwanted by user, no screen, etc.)
You should instead use the class attribute to discriminate your images the way you want.
Your code then becomes:
HTML
<img src="..." class="minimize" alt="A beautiful image">
Javascript
$(document).ready(function(){
$("img.minimize").click(function(){
alert("he");
});
});
It is not syntactically correct. What are you trying to do? Maybe this?
$(document).ready(function(){
$("img[alt=minimize]").click(function(){
alert("he");
});
});