|
HTML - Adding Picture Gallery To Webpage
HI,
For a few weeks now Ive been trying to install a picture gallery to my webpage... When I find a script that seems to be simple to install, I have trouble installing it correctly.. Does anyone know a simple picture gallery script that includes thumbnails and also a good set of instructions? thanks so much Matt Similar TutorialsI'd like to add a nice photo gallery to the website I'm building. I'm semi familiar with building a gallery in wordpress with a plugin & embedding the code into my main website, but I dont want to go that route for this new website I'm building as its not going to reside on wordpress & I want it everyting situated on one server with one main file. So what options are out there for me to add a nice gallery to a website? Hello all, If someone could assist me with the coding necessary to add a slideshow (photos banners etc) to webpages that would be very much appreciated. I am familiar with quite a lot of html formatting and have created a few functional homepages, but have no experience with this particular aspect. Thanks a lot in advance Lalita Sorry if i posted this in the wrong location. So im a real estate agent making a website. Im no pro and most of the stuff ive been using to build has been through layouts/generators/help of others such as yourselves. So ive been stuck on finding/making this code for the past couple of days. So all my listings are on my agencys website, not my personal agent website. Is there a code i could have where in the listings page my my personal agent website, i could have a window maybe 600x900 of the listing page on my agencys website? To kind of clear things up, you know how when you google something you have the magnifying glass, how it gives that preview. How can i have that preview coded onto a webpage, but me say what webpage to preview and how big to make the preview box? Tried to explain it as best i could. If you dont know the code, if you can tell me what its called so i can try to narrow the google searches. So far everything that has been coming up in the search restults has been preview boxes to preview html codes you have already written. Fail Blog Thanks I was wondering if there was a simple way or script out there that anyone knows that can change a picture at a certian time? I am doing a website for a diner and they close at 3:00pm and I was thinking about putting a sign on the website that would simply say "Open" when the diner is open and "Closed" when its obviously closed. Thanks in advanced Hi all i have a website banner wich i want as my signature so when someone clicks on it they go to my website i just need the html code for it if anyone can help thanx alot. Cheers Jacob For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be. <div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5"> <div class="wpmd"> <div><font face="Times New Roman" class="ws16">Mission Statement</font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> <div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> </div></div> <div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div> <div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8"> <div class="wpmd"> <div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div> </div></div> The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time! I'm trying to make a picture button. I have a little so far can you help with the rest. <input type="button" onclick="javascript:alert('Noob, u fell for it!!!')" /> If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table? The table is just giving me trouble!! Sorry to ask so many questions BTW. Hello, it seems every now and then when I create an image from a document/scan or such and I upload it, It displays fine in FireFox, however users in IE are reporting that they're not seeing the image. Can anyone take look at this image and tell me if you see this displaying in IE? http://thejf.org/images/JCC124.jpg Is this an IE bug or something? How come this image appears fine in FireFox but not IE? Hello! I have a bunch of picture i wish to have on a internal webpage to go around the sides and bottom of the page, positioned around a slideshow in the center. I have managed to get some to go down the left, and i can get them some to go to the bottom but once there they sit on top of each other not side by side? how can i overcome this?? I have tried the 'float' but this was no luck. Also can you tell me how get the images to come down the far right hand side of the page Thanks I have inc my code.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
Hi, Maybe this has been asked a thounsand times in this forum, but I haven't been here for a while. I would like to know how this is done: You have a button with a thumbnail of a picture that you click and this zoom in in the same page, then you click it back to zoom out. Any help will be appreciated. Thanks I'm having trouble fixing some bugs when viewing my site on IE 6. Here is my problem........ I have IE 6 and everything looks fine to me. But on other computers it looks messed up. So.... I was wondering if someone could help me out and take a screenshot of a page using IE 6. I want to see how it looks on other computers when the page fully loads up. This is the page http://webtvdeluxe.com/v2/Art Show Thank you in advance Hello.. i am creating a work webpage to display goodies are staff might like to buy for christmas! Ive got a slide show in the middle and other images around Ive been able to code the slide show so that when i click the image on the slide it display it in another window Im having a problem though with being able to code the images around the slide when i click the individual ones it just brings up the picture in the slide ? Ive had a little play with it and cant get my brain around it! It may be simple but ive been doing these for days and i am extremly tired from them lol.. can anyone help? i will display code below thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
<div class="image">
<img src="360s.jpg" border="0" width="200px" height="100" href="360s.jpg" />
</div>
<div class="image">
<img src="ps3.jpg" border="0" width="200px" height="100" />
</div>
<div class="image">
<img src="DS.jpg" border="0" width="200px" height="100" />
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
I use HTML 4.01 transitional, with some style sheets. I'd like to put a frame around a picture on an inspirational website for purely ascetic reasons. I don't want to use a table for a frame like some folks do. It' s kind of tacky. Does anybody know what code I'd need to do this? Is there some kind of style sheet I could use? After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag! (images removed) before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Community</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Urne's Tracks</h1> <p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p> <a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a> <a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a> <a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a> <br> <a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a> <a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a> <a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a> </br> </div> </div> </body> </html> Hope this can help you! Regards Urnemanden Hi I'm trying to make some text sit under a photo, and it works fine except in IE6, where the first word starts at the side of the photo, then the rest sits underneath. The page is at www.bigbadroo.com.au/top-stitching/www/ - the photo is of the woman on the left. Here's my html: <div id="wilma"> <img src="images/wilma.jpg" alt="Wilma" ><em><strong>Over 40 years industry experience!</strong></em> </div><!-- end #wilma --> and the CSS: #wilma { float:right; margin-top:10px; font-size:7.5pt; width:213px; } Is there anything obvious there? Thanks for your time and help Shaun I want to create this type of a navigation utility to scroll through large amounts of pictures 5 at a time. The picture links will be stored in an array. Any suggestions as to how I should code this? I work in asp if that matters. Code: <table> <tr> <td style="background-color:#cccccc;border:medium inset #ececec;padding:0;"> <input type="button" name="first" id="first" value="First 5" /> <input type="button" name="previous" id="previous" value="<<Prev 5<<" /> <input type="button" name="next" id="next" value=">>Next 5>>" /> <input type="button" name="last" id="last" value="Last 5" /> </td> </tr> </table> Thanks in advance! Hi everyone, I'm new here and new to html stuff. I really need to learn it to make my website. I've been messing around all day with the codes and so far all I got is this: <TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%"> <TR> <TD WIDTH="950" HEIGHT="17" BGCOLOR="#000000" VALIGN="top" align="left"> <font face="edwardian script itc" style="font-size: 65pt" color="#FFFFFF">George Gabrielle Couture </font></TD> </TR> </TABLE> <table border="0" width="20% align="right" bgcolor="FFFFFF"> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Fall/Winter</font></td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Holiday</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Resort</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Baby</td> Now I need to add some pics to the white part of the page (left-hand side). Forgive me everyone, when you answer this please treat me like I'm a 5 year-old, LOL . I am soooo html challenged. I'm only a seamstress, and sewing clothes is all I know . is there a specific one which i should use when making my site? jpeg or gif or any other format? Thanks how do i put a picture on the title bar? well, some sort like the bulb on this website. |
|||||||