Hello everyone I am new to this forum and would appreciate some help and advice. I am building my own site and would like on my site on the header to have like this site has http://www.shopsdhomes.com/ where you see the different pics of San Diego come up. How do you make something like that? Where do you get the software if any is needed to make that? Is there any free software to make something like that? I know it has something to do with java and macromedia if I am reading the code right but dont know how to make something like that for my site. I want it like it is on the left of the header on that site where a different pic every coupld of seconds comes up. Thank you in advance anyone that replies to this thread with advice and knowledge of this.
Newbie Needs Help
- Thread starter tbird165
- Start date
That image gallery in the header is made with Adobe Flash. A free trial version of Flash can be downloaded from adobe.com. The flash method is not entirely "free". Once the trial expires you are stuck unless you buy the app ($699). Being that those are just simple fade in/ fade out effects, it can also be achieved with javascript, more specifically jQuery. This method is entirely free. It will just require you to know a little about JS, CSS and HTML.
Ok where do I put the code
Ok I got the code to work on its own but I do not know where to put the code to get it to work with my page below is the code I got for the slide show and after that is the code of my main page of my site can someone tell me where to insert the elements of the slideshow code into my website code so it will work thanks
JQuery code
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="http://i654.photobucket.com/albums/uu261/tbird165/5.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/DelCerro1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/DowntownSanDiego1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/LaJolla1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/BalboaPark_DesertGarden.jpg" width="970" height="188" >
</div>
</body>
</html>
MY MAIN PAGE CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Wolff Realty Group Inc.</title>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">
<table bgcolor="#fffff0" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-FAMILY: Arial Black; COLOR: #000000; FONT-SIZE: xx-large">
<p align="left"><img style="WIDTH: 290px; HEIGHT: 176px" border="0" hspace="0" src="http://www.gabywolff.com/wolffrealtyinc/images/wolffjpg3.jpg"
span<><img style="WIDTH: 970px; HEIGHT: 188px"
border=0 hspace=0 src="http://i654.photobucket.com/albums/uu261/tbird165/5.jpg" width=399 height=302 ></p></span></td>
</tr>
</tbody>
</table>
<table bgcolor="#000000" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-FAMILY: Arial; COLOR: #ffffff; FONT-SIZE: x-small"><b></b></span></td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="18%" valign="top" bgcolor="#2e9afe"> <strong><span style="FONT-FAMILY: Arial; FONT-SIZE: medium"> </span></strong><strong><span style="FONT-FAMILY: Arial; FONT-SIZE: medium"> </span></strong>
<p align="center"><a
href="http://www.look4sdhomes.com/index.htm"><img style="WIDTH: 157px;
HEIGHT: 33px" border="0" hspace="0" src="http://i654.photobucket.com/albums/uu261/tbird165/Home.jpg" width="111" height="54" ></a></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/SanDiego.jpg" width=157 height=62></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/Universities.jpg" width=188 height=55></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/Hospitals.jpg" width=151 height=64></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/BiotechCompanies.jpg" width=277 height=64></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/PropertyManagement.jpg" width=321 height=61></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/AboutUs.jpg" width=149 height=58></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/ContactUS.jpg" width=170 height=54></p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="61%" valign="top">
<blockquote>
<p align="center"><font size="7">SITE UNDER
CONSTRUCTION!</font><br >
<div align="center"><span style="FONT-FAMILY: Arial; FONT-SIZE: xx-small">© COPYRIGHT 2009 ALL RIGHTS RESERVED WOLFF REALTY GROUP INC.</span></div>
</blockquote>
</td>
<td width="21%" valign="top">
<p> </p></td>
</tr>
</tbody>
</table>
<table bgcolor="#000000" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-SIZE: xx-small"> </span></td>
</tr>
</tbody>
</table>
</body>
</html>
Ok I got the code to work on its own but I do not know where to put the code to get it to work with my page below is the code I got for the slide show and after that is the code of my main page of my site can someone tell me where to insert the elements of the slideshow code into my website code so it will work thanks
JQuery code
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="http://i654.photobucket.com/albums/uu261/tbird165/5.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/DelCerro1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/DowntownSanDiego1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/LaJolla1.jpg" width="970" height="188" >
<img src="http://i654.photobucket.com/albums/uu261/tbird165/BalboaPark_DesertGarden.jpg" width="970" height="188" >
</div>
</body>
</html>
MY MAIN PAGE CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Wolff Realty Group Inc.</title>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">
<table bgcolor="#fffff0" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-FAMILY: Arial Black; COLOR: #000000; FONT-SIZE: xx-large">
<p align="left"><img style="WIDTH: 290px; HEIGHT: 176px" border="0" hspace="0" src="http://www.gabywolff.com/wolffrealtyinc/images/wolffjpg3.jpg"
span<><img style="WIDTH: 970px; HEIGHT: 188px"
border=0 hspace=0 src="http://i654.photobucket.com/albums/uu261/tbird165/5.jpg" width=399 height=302 ></p></span></td>
</tr>
</tbody>
</table>
<table bgcolor="#000000" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-FAMILY: Arial; COLOR: #ffffff; FONT-SIZE: x-small"><b></b></span></td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="18%" valign="top" bgcolor="#2e9afe"> <strong><span style="FONT-FAMILY: Arial; FONT-SIZE: medium"> </span></strong><strong><span style="FONT-FAMILY: Arial; FONT-SIZE: medium"> </span></strong>
<p align="center"><a
href="http://www.look4sdhomes.com/index.htm"><img style="WIDTH: 157px;
HEIGHT: 33px" border="0" hspace="0" src="http://i654.photobucket.com/albums/uu261/tbird165/Home.jpg" width="111" height="54" ></a></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/SanDiego.jpg" width=157 height=62></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/Universities.jpg" width=188 height=55></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/Hospitals.jpg" width=151 height=64></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/BiotechCompanies.jpg" width=277 height=64></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/PropertyManagement.jpg" width=321 height=61></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/AboutUs.jpg" width=149 height=58></p>
<p align="center"><img style="WIDTH: 157px; HEIGHT: 33px" border="0" hspace="0"
src="http://i654.photobucket.com/albums/uu261/tbird165/ContactUS.jpg" width=170 height=54></p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="61%" valign="top">
<blockquote>
<p align="center"><font size="7">SITE UNDER
CONSTRUCTION!</font><br >
<div align="center"><span style="FONT-FAMILY: Arial; FONT-SIZE: xx-small">© COPYRIGHT 2009 ALL RIGHTS RESERVED WOLFF REALTY GROUP INC.</span></div>
</blockquote>
</td>
<td width="21%" valign="top">
<p> </p></td>
</tr>
</tbody>
</table>
<table bgcolor="#000000" width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100%"><span style="FONT-SIZE: xx-small"> </span></td>
</tr>
</tbody>
</table>
</body>
</html>
orangecopper
New Member
just do a search online for a JQuery Slid show you will have the code and the steps.
cheers
Joshu
cheers
Joshu
Web Design with Adobe Flash
I have bought a Web Design Software with Adobe Flash function. It is on this site... http://internetwealthresources101.com . Click the Product Highlight, "Web Design... Fast & Easy".
I have bought a Web Design Software with Adobe Flash function. It is on this site... http://internetwealthresources101.com . Click the Product Highlight, "Web Design... Fast & Easy".
bloggerboy
New Member
Dynamic Drive is the solution for most of your web design needs. I say this from experience. They also have exactly what you're looking for here...
http://dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
designedbylucas
Banned
The best solution and the fastest one and the CHEAPEST ONE
You do not need to buy a $600 adobe product, nor do you need to use coding that you are not very familiar with. The best thing you should do is just go to this website; http://www.flashcomponents.net/ and search for the best gallery or flash slide show you like. You will spend not more than $15.00 in a flash component which you require no knowledge of flash and you will certainly be able to make the changes via a XML file. This is a very simple and economical way to have flash on your website.
We do this for our customers and its not that we can not custom design the flash our selves but simply that now a day with the economy you need to be simple and affordable and no one out there is willing to pay the cost of a custom flash application specially when these can be purchased ready to go out of the box by any other company.
Designed By Lucas
You do not need to buy a $600 adobe product, nor do you need to use coding that you are not very familiar with. The best thing you should do is just go to this website; http://www.flashcomponents.net/ and search for the best gallery or flash slide show you like. You will spend not more than $15.00 in a flash component which you require no knowledge of flash and you will certainly be able to make the changes via a XML file. This is a very simple and economical way to have flash on your website.
We do this for our customers and its not that we can not custom design the flash our selves but simply that now a day with the economy you need to be simple and affordable and no one out there is willing to pay the cost of a custom flash application specially when these can be purchased ready to go out of the box by any other company.
Designed By Lucas
Last edited by a moderator: