HTML - Image Gallery Loading Through Xml

I want to implement a thing like Myspace, Facebook, etc where guests can make comments on my images...

I just want the guest to have to enter a name, and a comment, no signing up or anything.

http://www.pzproductions.com/largeimages

Hello, I am a total HTML noob so please be patient

I use mocrosoft front page to edit a HTML template that I got off the web. Basically upload pictures to photobucket and paste the HTML link into the template. update the description and upload it to eBay.

I am looking to add an image gallery ( thumbnails and once clicked or moused over they enlarge in a big window above or below them) but I am not good with HTML at all.

I found some free source code on the net but I don't know how to integrate it into my template or even know if it can be done.

I tried using the image gallery that is built into front page and it seems ok when in the normal mode but when I switch to preview the pictures are gone and I receive script errors. when I look at the source it is pointing to a file on my C: drive instead of the images in photobucket.

I have no idea how HTML works but it seems that the source should point to a file or files on a website because it can't pull images from my hard drive once it's uploaded to ebay.

i plan to take some classes on HTML to learn more but in the meantime your help is appreciated.

If you have any easy methods to setup an image gallery or tutorial it would be a great help

Thank you
Adam

This is my first post here. Hi and thanks in advance for any future help anyone may be able to offer.

I am not very good at html and I have just received a class assignment that I am having a lot of trouble doing. I am not having much luck finding tutorials that create an image gallery.

Here is the assignment I have to do:

Quote:
In your previous assignments, you may have found that when you click on a gallery item in someone's gallery, you are shown a larger version of the image with more information about the piece. This is called a "detail" page. Your assignment is to design (using text only) a 600 pixel by 400 pixel detail page that includes an area for a main image, a description, next and previous buttons, and a close window button. Then collect five placeholder images from the Web. Create one detail page for each of your five placeholder images. For each image, write a short description that includes an unordered or ordered list. Also, remember to cite the sources from where you got the images unless they are your own images. Then link these pages together so the previous and next buttons send the user back and forth through the list of images. Remember that just because these are images now, you can easily replace the images with programs or files you create later on. Put each of your detail pages into a single folder, zip the folder, and upload the zip.
I am really unsure how to get started. Thanks.

hi all....well im a bit stuck as im trying to research into obtaining the code for an image gallery, like seen here- http://www.nessherry.co.uk/fashion/f...junky_book.htm ...where you click on the image and it's displayed on the same page in a larger table.
does anybody know what this is called exactly?? the source doesnt appear to have javascript....

thanks!

How do I get my image gallery to work? [html]

Example
I am trying to do exactly what they have done here, with the image thumbs on the same table, and the next button will scroll through them.

My Result


Whats going on?

p.s. i have attached the HTML file in the zip folder, and if u dont want to download that i have attached it as a txt file.

Hi all i need some help. I have created a simple gallery with a large image and smaller images to the left of it, when the small images are clicked they change to the large image, see an example here http://vfashion.co.uk/help/example.html

but i want to be able to add a link below the main image so when its clicked the current image that is displaying large will open up in a new window.

how would i do this???

the code for the page is below please can someone help me

Code:

<head>
<meta content="en-gb" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
	margin-bottom: 0px;
}
</style>
</head>

<TABLE id=table1 height=164 cellSpacing=0 cellPadding=0 width=605 border=0 class="auto-style1">
<TR>
<TD vAlign=top width=603 colSpan=2 height=20><B><FONT face=Arial color=#333333></FONT></B></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=147 border=0>
<TBODY>
<TR>
<TD height=10></TD></TR>






<TR>



</TR>








<TR>
<TD height=5><div align="center">
	<table border="0" width="147" cellspacing="0" cellpadding="0" id="table23">
		<tr>
			<td align="center" colspan="2" height="10"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="1.jpg" width=70 border=1 onclick=document.url.src="1.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="2.jpg" width=70 border=1 onclick=document.url.src="2.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
		<tr>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="3.jpg" width=70 border=1 onclick=document.url.src="3.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="4.jpg" width=70 border=1 onclick=document.url.src="4.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
		<tr>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="5.jpg" width=70 border=1 onclick=document.url.src="5.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="6.jpg" width=70 border=1 onclick=document.url.src="6.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
	</table></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top width=405 height=40 rowSpan=3>
<P align=center>
<img src="1.jpg" alt="" name="url" width="380" border="0" id="url"></P>
<P align=center>
Click to enlarge</P></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
&nbsp;</TD>
	</TR>

Hi,
I need HTML code for image gallery like this or similar one.
The most importand is the left&right arrows.
Thanks for who try to help.

This is sort of both HTML and CSS, but I'll post it here for now. My question is:

In CSS, I type the following:

td.tablehead {
background-image:---------;
.........;
.........;
}

Now, I will be using the "tablehead" class around 20 times on a webpage, so will the background image stated above have to load 20 TIMES, or just once, since the same image is being used?

Please respond ASAP. Thanks

Im having a problem i dont know if its just the loading speed, but so the image slideshow i have loads first below my tabbed info on the right, it loads beneath but then to the top, not a major issue but feels like it could be fixed, the code is here

Code:

<style>
    .peKenBurns {
        width: 500px;
        height: 330px;
		align: center;
		margin-left:6px;
    }       

</style>

<script>
    jQuery(function($){
        $(".peKenBurns").peKenburnsSlider()
    })
</script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery','1.4.3');
google.setOnLoadCallback(function()
	{
		$('#desc1 div:not(:first)').hide();
		
		$('#tabs1 li').click(function(event){
			var id = $(event.target).index();
			$('.active1').removeClass('active1');
			$(event.target).addClass('active1');
			$('#desc1 div').hide().eq(id).show();
		});
		
		$('#desc2 div:not(:first)').hide();
		
		$('#tabs2 li').click(function(event){
			var id = $(event.target).index();
			$('.active2').removeClass('active2');
			$(event.target).addClass('active2');
			$('#desc2 div').hide().eq(id).show();
		});

                $('#desc3 div:not(:first)').hide();
		
		$('#tabs3 li').click(function(event){
			var id = $(event.target).index();
			$('.active3').removeClass('active3');
			$(event.target).addClass('active3');
			$('#desc3 div').hide().eq(id).show();
		});

                $('#desc4 div:not(:first)').hide();
		
		$('#tabs4 li').click(function(event){
			var id = $(event.target).index();
			$('.active4').removeClass('active4');
			$(event.target).addClass('active4');
			$('#desc4 div').hide().eq(id).show();
		});
	}
	);
</script>

<style type="text/css">
h1 {
	margin-left:5px;
}

#wrapper {
	width:470px;
	margin-left:5px;
}

#tabs1 {
	width:100%;
	padding:0px;
	margin:0px;
}

#tabs1 ul {
	padding:0px;
	margin:0px;
	width:100%;
}

#tabs1 li {
	height:50px;
	display:block;
	float:left;
	line-height:50px;
	text-align:center;
	background:#036;
	margin:0px;
	padding:0px;
	width:32.9%;
	color:#FFF;
	cursor:pointer;
	text-transform:uppercase;
}

#tabs1 li.active1 {
	background:#CCC;
	color:#000;
	border-bottom:1px solid #CCC;
}

#desc1 {
	width:100%;
}

#desc1 div {
	clear:left;
	width:100%;
	height:200px;
}
</style>



<table width="100%" cellspacing="3" cellpadding="3" border="0" class="border">
    <tbody>
        <tr>
            <td>
            <h1>Residential - Doors</h1>
            <a href="http://[LINKID:4]">&laquo; Back to Residential</a>

            <table width="100%" cellspacing="1" cellpadding="1" border="0" summary="">
                <tbody>
                    <tr>
                        <td width="270"><!-- slider markup, 3 slides -->
    <div class="peKenBurns" data-mode="swipe" data-logo="disabled" data-controls="over" data-shadow="disabled">
			<div class="peKb_active" data-delay="6">
				<img src="images/page_content/residential_doors_sliding1.jpg"/></a>
			</div>
			
			<div class="peKb_active" data-delay="6">
				<img src="images/page_content/residential_doors_sliding2.jpg"/></a>
			</div>
			
			<div class="peKb_active" data-delay="6">
				<img src="images/page_content/residential_doors_sliding3.jpg"/></a>
			</div>
			
			<div class="peKb_active" data-delay="6">
				<img src="images/page_content/residential_doors_sliding4.jpg"/></a>
			</div>
            	    
		</div>
    <!-- end slider markup --></td>
                            <td>
                            </td>                            
                            <td>
                            <h1>SLIDING WINDOWS</h1>
                    <div id="wrapper">
						<div id="tabs1">
							<ul>
								<li class="active1">Description</li>
								<li>Features</li>
								<li>Options</li>
							</ul>
						</div>
                            
						<div id="desc1">
							<div>	
									<p>Aluminum sliding windows are both functional and durable. The ultimate low maintenance window style due to few moving parts. The sliding window is a classic design that will suit most architectural styles.</p>            
							</div>
                        
							<div>
								
									<ul>
										<li>Choice of coloured glass &amp; Aluminium</li>
										<li>Screens are fittable or removable from inside the room</li>
										<li>Maximum Height 1500mm</li>
										<li>Maximum Glass Laminate 6.38mm</li>
										<li>Adjustable height key locks</li>
									</ul>
									                       	
                            </div>
                            <div>
										<ul>
											<li>Range up to BAL 40 for bushfire areas</li>
											<li>Range of glazing solutions</li>
											<li>External aluminium insect, safety and supascreens</li>
											<li>Sump sill for extreme weather conditions</li>
											<li>Range of standard and custom colours</li>
                                            <li>Variety of window style configurations</li>
										</ul>
										           
                            </div>
                            
						</div>
                        </div>
                            </td>
							
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>  
						</tr>

if that doesnt help go to http://www.c-view.com.au/index2.php?...ential-windows

Hey. I'm relatively new to web design. I've made a gallery of photo's using this code:

<INPUT type="image" src="image.ext" onClick="window.open('http://www.website/image.jpg,'mywindow','width=400, height=600')">

because I wanted all photo's to pop up in a new window, and with specified dimensions. This code works great, but I want to have the "rolleover" effect, where you can put the mouse over it and it changes the photo, such as with this code:

<body>
<a href="zstore.html" onmouseover='rollover.src="http://ollertonmusic.com/images/ministudio1.jpg"' onmouseout='rollover.src="http://ollertonmusic.com/images/ministripes.jpg"'>
<img src="http://ollertonmusic.com/images/ministripes.jpg" name="rollover">
</a>

I want to be able to have the image have the "rollover" effect when the curser touches the photo, AND open in a new window with specified dimensions. And I'm wondering where to add in the ALT tag. Thanks!

hello, i've placed an image gallery to my website . i am unable to align it to the center,

http://www.nonvoicebpo.co.cc.
This site consist of non voice BPO services details, at the top of the site i am calling one image , it is loading very slowly.

how to load it quickly.
thanks

hi

when u surf to my forum. u will see the images a real short time in a place on the screen where they should not be. right after that they are being positioned by css.

surf to www.acidleague.com and all goes well, but then click on forum and u will see this issue, then u can click home-forum-home-forum to see it really clear

the wierd part is that this is happening only by divs i added myself to the code

i made these divs in the overal_header.html page
<div id="sidebarleft"></div>
<div id="sidebarright"></div>
<div id="cornerleft"></div>
<div id="cornerright"></div>

and uses this css on em
#sidebarleft {
padding: 0px;
float: left;
margin: 0;
position:absolute;
width: 600px;
left:-599px;
top:0px;
height:600px;
background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg);
background-repeat:repeat-x;
}

#sidebarright {
padding: 0px;
float: left;
margin: 0;
position:absolute;
width: 600px;
left:999px;
top:0px;
height:800px;
background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg);
background-repeat:repeat-x;
}


#cornerleft {
padding: 0px;
float: left;
margin: 0;
position:absolute;
width: 47px;
left:-46px;
top:192px;
height:49px;
background-image:url(http://www.acidleague.com/League/the...bg/tleft.jpg);
}

#cornerright {
padding: 0px;
float: left;
margin: 0;
position:absolute;
width: 47px;
left:999px;
top:192px;
height:49px;
background-image:url(http://www.acidleague.com/League/the...g/tright.jpg);
}



whats is the most common way to stop this?

ty

Is it possible with html? i've been working on a site but each time you click the next arrow a new page loads, all the text is in the same place so it doesn't move and is even in a fixed div but due to it being a new page everything loads, the text collapses until the larger image in the center loads. Of course this is fixed when the site is cached but of course the site would only be cached once someone has clicked through it and experienced the problems 27 times...

so my question is is it possible to code for when i click the next arrow only a new image from a different link to load? is this possible with html? I don't know a single thing about flash or javascript.

thanks for all the help in advance here is the page in question (not done but you can still see the problems. the home and bio links well, aren't links yet)

http://www.paulodourado.com/

Hi,

Want to open a window without addressbar and menubar with loading image for the button click.

i want to c the loading gif right after opening the window.

its very urgent anybody help me on this

Thanks,