MrFahad
asked on
Dynamic image slideshow with PHP and javascript
Hello, I'm doing a real estate dynamic website and i want to show a dynamic slide show that will randomly or by time wise show list of properties and their details, I'm using this slide show but i don't know how to edit it to meet my needs:
slide show link: http://billwscott.com/carousel/
my property database and image upload info link : https://www.experts-exchange.com/questions/24144999/PHP-image-upload.html
If you need any more info please tell me
Thank you
slide show link: http://billwscott.com/carousel/
my property database and image upload info link : https://www.experts-exchange.com/questions/24144999/PHP-image-upload.html
If you need any more info please tell me
Thank you
I'm sorry, but it doesn't seem that you have a specific problem and that you just want someone to do some development for you for free. If you could tell us specifically whats not working for you I'm sure we could help out.
ASKER
the thing I'm trying to do is to make the images and their info display dynamically (not static like i.e:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Carousel Component Example - Static HTML Content</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="scripts/carousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">
<link href="css/carousel.css" rel="stylesheet" type="text/css">
<link href="css/yui.css" rel="stylesheet" type="text/css">
<!--
Inlined styles for my overrides to the carousel for this demo.
Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
padding:8px 16px 4px 16px;
margin:0px;
}
.carousel-component .carousel-list li {
margin:4px;
width:79px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
img.border-left (1) + img.border-right (1)*/
height:93px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}
.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}
.carousel-component .carousel-list li img {
border:1px solid #999;
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
right:5px;
}
</style>
<script type="text/javascript">
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the previous button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: prevButtonStateHandler
**/
var handlePrevButtonState = function(type, args) {
var enabling = args[0];
var leftImage = args[1];
if(enabling) {
leftImage.src = "images/left-enabled.gif";
} else {
leftImage.src = "images/left-disabled.gif";
}
};
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the next button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: nextButtonStateHandler
**/
var handleNextButtonState = function(type, args) {
var enabling = args[0];
var rightImage = args[1];
if(enabling) {
rightImage.src = "images/right-enabled.gif";
} else {
rightImage.src = "images/right-disabled.gif";
}
};
/**
* You must create the carousel after the page is loaded since it is
* dependent on an HTML element (in this case 'mycarousel'.) See the
* HTML code below.
**/
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
carousel = new YAHOO.extension.Carousel("mycarousel",
{
numVisible: 3,
animationSpeed: 0.15,
scrollInc: 3,
navMargin: 20,
prevElement: "prev-arrow",
nextElement: "next-arrow",
size: 19,
prevButtonStateHandler: handlePrevButtonState,
nextButtonStateHandler: handleNextButtonState
}
);
};
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>
</head>
<body >
<div id="doc" class="yui-t7">
<div id="hd">
<h1>Static HTML Content - Carousel</h1>
</div>
<div id="bd">
<p>An unordered list of items (provided directly in HTML) is managed by the carousel. All content is static to the page.</p>
<!-- Carousel Structure -->
<div id="mycarousel" class="carousel-component">
<div class="carousel-prev">
<img id="prev-arrow" class="left-button-image"
src="images/left-enabled.gif" alt="Previous Button"/>
</div>
<div class="carousel-next">
<img id="next-arrow" class="right-button-image"
src="images/right-enabled.gif" alt="Next Button"/>
</div>
<div class="carousel-clip-region">
<ul class="carousel-list">
<li id="mycarousel-item-1">
<a href="#"><img width="75" height="75" src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg" alt="item 1"/></a># One</li>
<li id="mycarousel-item-2"><div><a href="#"><img width="75" height="75" src="http://static.flickr.com/67/162582262_e969394bc3_s.jpg" alt="item 2"/></a># Two</div></li>
<li id="mycarousel-item-3"><a href="#"><img width="75" height="75" src="http://static.flickr.com/49/162582189_e0571b02e2_s.jpg" alt="item 3"/></a># Three</li>
<li id="mycarousel-item-4"><a href="#"><img width="75" height="75" src="http://static.flickr.com/53/162581581_de49021696_s.jpg" alt="item 4"/></a># Four</li>
<li id="mycarousel-item-5"><a href="#"><img width="75" height="75" src="http://static.flickr.com/74/161894590_9a1a9788e1_s.jpg" alt="item 5"/></a># Five</li>
<li id="mycarousel-item-6"><a href="#"><img width="75" height="75" src="http://static.flickr.com/55/161894230_a4f1baf3d2_s.jpg" alt="item 6"/></a># Six</li>
<li id="mycarousel-item-7"><a href="#"><img width="75" height="75" src="http://static.flickr.com/52/161894040_04f135f1a2_s.jpg" alt="item 7"/></a># Seven</li>
<li id="mycarousel-item-8"><a href="#"><img width="75" height="75" src="http://static.flickr.com/54/161893927_c173a1e28c_s.jpg" alt="item 8"/></a># Eight</li>
<li id="mycarousel-item-9"><a href="#"><img width="75" height="75" src="http://static.flickr.com/72/161893872_6800ebea26_s.jpg" alt="item 9"/></a># Nine</li>
<li id="mycarousel-item-10"><a href="#"><img width="75" height="75" src="http://static.flickr.com/77/161892664_755fdad7b6_s.jpg" alt="item 10"/></a># Ten</li>
<li id="mycarousel-item-11"><a href="#"><img width="75" height="75" src="http://static.flickr.com/64/161892344_25ed032a4b_s.jpg" alt="item 11"/></a># Eleven</li>
<li id="mycarousel-item-12"><a href="#"><img width="75" height="75" src="http://static.flickr.com/51/154250687_c241e9b5a2_s.jpg" alt="item 12"/></a># Twelve</li>
<li id="mycarousel-item-13"><a href="#"><img width="75" height="75" src="http://static.flickr.com/58/154252383_d59833136c_s.jpg" alt="item 13"/></a># Thirteen</li>
<li id="mycarousel-item-14"><a href="#"><img width="75" height="75" src="http://static.flickr.com/72/154249854_e478567f11_s.jpg" alt="item 14"/></a># Fourteen</li>
<li id="mycarousel-item-15"><a href="#"><img width="75" height="75" src="http://static.flickr.com/52/154249682_0e000a8bbd_s.jpg" alt="item 15"/></a># Fifteen</li>
<li id="mycarousel-item-16"><a href="#"><img width="75" height="75" src="http://static.flickr.com/49/154250868_9ed96d9fdf_s.jpg" alt="item 16"/></a># Sixteen</li>
<li id="mycarousel-item-17"><a href="#"><img width="75" height="75" src="http://static.flickr.com/52/154250543_633506d4cf_s.jpg" alt="item 17"/></a># Seventeen</li>
<li id="mycarousel-item-18"><a href="#"><img width="75" height="75" src="http://static.flickr.com/46/161892486_b4f8b93917_s.jpg" alt="item 18"/></a># Eighteen</li>
<li id="mycarousel-item-19"><a href="#"><img width="75" height="75" src="http://static.flickr.com/72/162582313_e0289e18cb_s.jpg" alt="item 19"/></a># Nineteen</li> </ul>
</div>
</div>
<div style="padding-top:20px;clear:both">View the <a href="source.php?url=carousel_html_static.html">source</a> or <a href="index.html">documentation</a></div>
</div>
</div>
</body>
</html>
I don't see anywhere for details, but I'd do something like this starting about about line 156.
//First create an array like this:
$imagearray[] = array("Name" => "somename", "URL" => "someurl", "Details" => "Some Details");
//Then loop through the array
$x = 1;
foreach($imagearray as $image)
{
echo '<li id="mycarousel-item-' . $x . '"><a href="#">';
echo '<img width="75" height="75" src="';
echo $image['URL'] . '" alt="' . $image['Name;
echo '"/></a>' . $image['Details'] . '</li>';
$x++;
}
fixed.
//First create an array like this:
$imagearray[] = array("Name" => "somename", "URL" => "someurl", "Details" => "Some Details");
//Then loop through the array
$x = 1;
foreach($imagearray as $image)
{
echo '<li id="mycarousel-item-' . $x . '"><a href="#">';
echo '<img width="75" height="75" src="';
echo $image['URL'] . '" alt="' . $image['Name'];
echo '"/></a>' . $image['Details'] . '</li>';
$x++;
}
ASKER
but this code does not take the image and it's details from my database and server
ASKER
what should i put in somename, someurl, some details?
("Name" => "somename", "URL" => "someurl", "Details" => "Some Details");
Maybe I'm misunderstanding the point of Experts-exchange, i was under the impression this site was to HELP people, not do their work for them. There are numerous examples on the web to pull information from a database and pop it into an array. If you have a specific question i'll be more than glad to help, otherwise someone else can help if they wish.
Thank you for a specific question MrFahad inside of there goes the data from your database:
Forinstance, if your row names were "img_name", "img_url", and "img_dtl" it would look like this:
Forinstance, if your row names were "img_name", "img_url", and "img_dtl" it would look like this:
$imagearray[] = array("Name" => $row['img_name'], "URL" => $row['img_url'], "Details" => row['img_dtl']);ASKER
thanks for the help, sorry for being so general i really appreciate your help, it's just I'm still new in php and it's kinda confusing for me.
anyway i think we should change the array a little but what i want to show is the image of the property and it's details, note: the url of the image is not save in the database, i will attach screen shot of my db structure.
so i think the array should be like that:
$imagearray[] = array("Name" => $row['img_name'], "URL" => $row['img_url'], "Details" => row['PropertyAddress'] . row['ListedPrice']);
for the url can't we do something like adding a suffix of images/ and then add the name of the img to give us the url
thank you
5arw72i4upx7gv5jxomf.jpg
anyway i think we should change the array a little but what i want to show is the image of the property and it's details, note: the url of the image is not save in the database, i will attach screen shot of my db structure.
so i think the array should be like that:
$imagearray[] = array("Name" => $row['img_name'], "URL" => $row['img_url'], "Details" => row['PropertyAddress'] . row['ListedPrice']);
for the url can't we do something like adding a suffix of images/ and then add the name of the img to give us the url
thank you
5arw72i4upx7gv5jxomf.jpg
ASKER
in my comment above in the part "show is the image of the property and it's details" by details i refer to the details of the property i.e: it's address and price
sure just change:
echo $image['URL'] . '" alt="' . $image['Name'];
//TO THIS
echo 'images/' . $image['Name'] . '" alt="' . $image['Name'];
ASKER
Hello david,
i have did what you told me but the images is not appearing here is the source code of the page:
note: when i go to view source in firefox i see the php code there, as far as i know server side scripts don't appear in the view source right?
thank you
i have did what you told me but the images is not appearing here is the source code of the page:
note: when i go to view source in firefox i see the php code there, as far as i know server side scripts don't appear in the view source right?
thank you
html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Carousel Component Example - Static HTML Content</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="javascript/carousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">
<link href="stylesheets/carousel.css" rel="stylesheet" type="text/css">
<link href="stylesheets/yui.css" rel="stylesheet" type="text/css">
<!--
Inlined styles for my overrides to the carousel for this demo.
Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
padding:8px 16px 4px 16px;
margin:0px;
}
.carousel-component .carousel-list li {
margin:4px;
width:79px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
img.border-left (1) + img.border-right (1)*/
height:93px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}
.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}
.carousel-component .carousel-list li img {
border:1px solid #999;
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
right:5px;
}
</style>
<script type="text/javascript">
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the previous button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: prevButtonStateHandler
**/
var handlePrevButtonState = function(type, args) {
var enabling = args[0];
var leftImage = args[1];
if(enabling) {
leftImage.src = "images/left-enabled.gif";
} else {
leftImage.src = "images/left-disabled.gif";
}
};
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the next button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: nextButtonStateHandler
**/
var handleNextButtonState = function(type, args) {
var enabling = args[0];
var rightImage = args[1];
if(enabling) {
rightImage.src = "images/right-enabled.gif";
} else {
rightImage.src = "images/right-disabled.gif";
}
};
/**
* You must create the carousel after the page is loaded since it is
* dependent on an HTML element (in this case 'mycarousel'.) See the
* HTML code below.
**/
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
carousel = new YAHOO.extension.Carousel("mycarousel",
{
numVisible: 3,
animationSpeed: 0.15,
scrollInc: 3,
navMargin: 20,
prevElement: "prev-arrow",
nextElement: "next-arrow",
size: 19,
prevButtonStateHandler: handlePrevButtonState,
nextButtonStateHandler: handleNextButtonState
}
);
};
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>
</head>
<body >
<div id="doc" class="yui-t7">
<div id="hd">
<h1>Static HTML Content - Carousel</h1>
</div>
<div id="bd">
<p>An unordered list of items (provided directly in HTML) is managed by the carousel. All content is static to the page.</p>
<!-- Carousel Structure -->
<div id="mycarousel" class="carousel-component">
<div class="carousel-prev">
<img id="prev-arrow" class="left-button-image"
src="images/left-enabled.gif" alt="Previous Button"/>
</div>
<div class="carousel-next">
<img id="next-arrow" class="right-button-image"
src="images/right-enabled.gif" alt="Next Button"/>
</div>
<div class="carousel-clip-region">
<ul class="carousel-list">
<?PHP
//First create an array like this:
$imagearray[] = array("Name" => $row['imageinfo'], "Details" => row['PropertyAddress'] . row['ListedPrice']);
//Then loop through the array
$x = 1;
foreach($imagearray as $image)
{
echo '<li id="mycarousel-item-' . $x . '"><a href="#">';
echo '<img width="75" height="75" src="';
echo 'images/' . $image['imageinfo'] . '" alt="' . $image['imageinfo'];
echo '"/></a>' . $image['Details'] . '</li>';
$x++;
}
?>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
ASKER
i have added the connect to database code but still no images, i was wondering how php will know what table to pull data from i mean should we use select from ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks for the help mate, i will give it a try, by the way i know how to connect to a database that's abc of php ;p
Good Good :)
ASKER
Parse error: syntax error, unexpected T_WHILE in /Applications/MAMP/htdocs/
woops,
where it says x = 1
make it say
x = 1;
where it says x = 1
make it say
x = 1;
ASKER
i searched the code and found u for got ; in $x = 1 so i added it now i get,
Parse error: syntax error, unexpected '[', expecting ',' or ';' in /Applications/MAMP/htdocs/
this one i don't know how to solve :p
Parse error: syntax error, unexpected '[', expecting ',' or ';' in /Applications/MAMP/htdocs/
this one i don't know how to solve :p
ASKER
any help please?
can you paste line 166 and a few lines before and after it. It is just a syntax error, and probably my fault as well.
ASKER
echo '"/></a>' . row['PropertyAddress'] . row['ListedPrice'] . '</li>'; is line 166
$query = 'select * form properties';
$results = mysql_query($query) or die('Failed to preform query: ' . $query . mysql_error());
$x = 1;
while($row = mysql_fetch_array($results, MYSQL_ASSOC)) {
echo '<li id="mycarousel-item-' . $x . '"><a href="#">';
echo '<img width="75" height="75" src="images/';
echo $row['imageinfo'] . '" alt="' . $row['imageinfo'];
echo '"/></a>' . row['PropertyAddress'] . row['ListedPrice'] . '</li>';
x++;
}
ah simple mistake use this line and it should work.
echo '"/></a>' . $row['PropertyAddress'] . $row['ListedPrice'] . '</li>'; is line 166ASKER
hmm there is no error now, but it only show the html part of the page i.e (no images and details)
Is the site somewhere that I could get to it? Are the images correctly named in the images/ folder? What about your javascript includes, are they correctly located?
ASKER
i will upload it now and check the pathes
You're getting this error:
Failed to preform query: select * form propertiesYou have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'form properties' at line 1</ul>
my typos will never end. should be select * from properties: from, not form
Failed to preform query: select * form propertiesYou have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'form properties' at line 1</ul>
my typos will never end. should be select * from properties: from, not form
ASKER
woooohooo worked finally, but there is two notes, 1st image is broken i checked the url it is correct, 2nd what if i want the detail to link to details.php, the details page will have dynamic content depending on the propertyid of the property i think the could be some thing like details.php?propertyid=11
but how to make the ?propertyid= dynamic depending the name of the property lets say?
but how to make the ?propertyid= dynamic depending the name of the property lets say?
This is how you build your link, and I can't tell you for sure about your first image, re upload and let me know and I'll look into it.
echo '"/></a><a href="someurl.php?propertyid=' . $row['propertyid'] . '">' . row['PropertyAddress'] . row['ListedPrice'] . '</a></li>';ASKER
Parse error: syntax error, unexpected '[', expecting ',' or ';' in /Applications/MAMP/htdocs/
echo '"/></a><a href="someurl.php?propertyid=' . $row['propertyid'] . '">' . row['PropertyAddress'] . row['ListedPrice'] . '</a></li>';
same as before, put a $ in front of row if it doesn't already have one.
ASKER
ok it's working now the last thing is:
the price is not appearing in the details
the price is not appearing in the details
Does the database have a valid value in the ListedPrice field. as long as it says $row['ListedPrice'] it should print fine just like the address. If not, upload it and i'll take a look.
It works fine on the first image, i assume your others have bogus data. The reason you can't see it is because you html doesn't give it enough room. This is what actually prints to the browser though.
<a href="details.php?propertyid=25">Bu Daing, Sharjah, UAE2000000</a>
ASKER
so i have to make the carousel bigger from the css ?
Yes
ASKER
ok i done it
every thing work thanks for the help mate
every thing work thanks for the help mate
You're welcome
ASKER
great guy