I have written a web application that involves having users upload pictures to the site. On the homepage, I dynamically show the newest pictures/items uploaded in PHP, limiting it to ten. However, the page looks so static and I have searched on Google, bing, ask, yahoo, etc for days now and haven't had any answers.
I have written the code to store store the images, and get them from the db.
The images are shown on the homepage, and the only thing i have left to do is load it in a slider.
$sql = mysql_query("SELECT * FROM items ORDER BY item_date_added DESC LIMIT 10")or die(mysql_error());
while($row = mysql_fetch_array($sql)) {
//$user_id = $row['user_id'];
$item_name = $row['item_name'];
$item_id = $row['item_id'];
$check_pic = "users/$item_name.jpg";
if (file_exists($check_pic)) {
$show_pic = "<img src=\"users/$item_name.jpg\" width=\"100px\" height=\"100px\" border=\"5\" id='img'/>";
//$user_pic3 = "<img src=\"users/$rid/image01.jpg\" width=\"50px\" height=\"50px\" border=\"1\" />";
//$MemberDisplayList .= '' . $user_pic3 . '';
$i++;
$show_new_items .= "<a href='item_view?item_id=$item_id&&session_item=$item_id'>$show_pic</a>";
}
$newly_listed_names .= " <a href='item_view?item_id=$item_id&&session_item=$item_id'> $item_name </a> | ";
}
///////// END SHOW NEWLY ADDED ITEMS ///////////////////////////////////////////////////
the newly added items in echoed in a div in the body.
Can anyone help me please! it's been bothering me for a while now. Thanks.
To use Nivo, you need to generate html that looks something like this... (Download the nivo demo and open up the demo.html for the full source).
So all you need to do is output your images in a loop inside the slider div.
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
while($row = mysql_fetch_array($sql)){
$item_name = $row['item_name'];
$item_id = $row['item_id'];
$check_pic = "users/$item_name.jpg";
if (file_exists($check_pic)) {
print "<img src=\"users/$item_name.jpg\"/>";
$i++;
}
}
?>
<img src="images/2.jpg" data-thumb="images/2.jpg" alt=""/>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
You can use jquery plugins such as Nivo. Or you can try different jquery plugin from this link. And integrate it with your code.
Related
I am creating a search, and what I want is when the user searches they will be able to see a number of different attractions appear. At the minute when I search the data appears in a long list.
else {
while ($row = mysqli_fetch_array($result)) {
$attraction_name = $row['attraction_name'];
$lat = $row['lat'];
$long = $row['long'];
$cost = $row['cost'];
$image = "<img src='{$row['image']}' height='100' width='100'>";
$output .= '<div>'.$attraction_name.' '.$lat.' '.$long.' '.$cost.' '.$image.'</div>';
}
}
I have added a simple html format which looks like the following
<div class="col-md-4">
<div class="thumbnail">
<?php print ("$output");?>
</div>
However the html appears all the time and I don't want this. What I would like is to create a search and then when the search results are returned they will appear in the html divs. Does anyone know how to do this? Thanks in advance.
You can wrap HTML in PHP logic like so:
<?php
if ($hasResults)
{ ?>
<div class="col-md-4">
<div class="thumbnail">
<?php print ("$output");?>
</div>
<?php }
?>
Although I have resorted to stackoverflow for answers in the past many times but this is my first ever question on stackoverflow. I researched a lot about my issue and couldnt get answer to this specific issue. Hope posting actual question might help.
So here it is:
I have 2 divs in artwork.php
echo '<div id="on_going_art"></div>';
echo '<div id="completed_art"></div>';
My DB has 2 tables: artwork and user_hour_log
each user_id can have multiple art_id assigned to it and each art_id can have multiple user_hour_log entries.
Say $art[] is an array with multiple art_id in it and I am getting user_id from cookie:
for ($i=0; $i<count($art); $i++){
$query2= "SELECT *, SUM(total_time) AS total_time FROM user_hour_log WHERE user_id = '".$user_id."' && art_id = '".$art[$i]."'";
$result2 = mysqli_query($conn, $query2);
$row2 = $result2 -> fetch_assoc();
$hours_completed_artwork = $row2['total_time'];
$query3= "SELECT * FROM artwork WHERE winner_user_id = '".$user_id."' && art_id = '".$art[$i]."'";
$result3 = mysqli_query($conn, $query3);
$row3 = $result3 -> fetch_assoc();
$highest_bid_hours = $row3['highest_bid_hours'];
Here I am checking if $hours_completed_artwork is less than $highest_bid_hours, then append in #on_goin_art else append in #completed_art respectively:
if($hours_completed_artwork < $highest_bid_hours) {
echo '<script type="text/javascript">
$(document).ready(function() {
$("#on_going_art").append("
echo "<div class=\"row box1\">";
echo "<div class=\"col-xs-4 col-sm-4 col-md-4\">";
echo "<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\">";
echo "</div>";
echo "<div class=\"col-xs-8 col-sm-8 col-md-8\">";
echo "<h6 >"'.$row3['artwork_name'].'"<span id=\"percentage\">"'.number_format($hours_completed_artwork/ $highest_bid_hours *100,0).'"%</span> </h6>";
echo "</div>";
echo "</div>";
");
});
</script>';
} else if($hours_completed_artwork >= $highest_bid_hours) {
echo '<script type="text/javascript">
$(document).ready(function() {
$("#completed_art").append("
echo "<div class=\"row box1\"> \n";
echo "<div class=\"col-xs-4 col-sm-4 col-md-4\"> \n";
echo "<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\"> \n";
echo "</div> \n";
echo "<div class=\"col-xs-8 col-sm-8 col-md-8\"> \n";
echo "<h6 >'.$row3['artwork_name'].'<span id=\"percentage\">100% </span> </h6> \n";
echo "</div> \n";
echo "</div>";
");
});
</script>';
The problem is the append doesnt work, if I append just the strings eg: 'incomplete' and 'complete' it appends perfectly in right divs but it doesnt do it with my code.
I tried closing php tags right before including script tags that dint work either.
I have included Google CDN jquery links, tried changing position of script tags.
Sorry for such a long question. Hope it makes sense.
Here is a working snippet:
$row3['artwork_name'] = 'Some name';
$hours_completed_artwork = 40;
$highest_bid_hours = 50.00;
$percentage = $hours_completed_artwork < $highest_bid_hours ? number_format($hours_completed_artwork/ $highest_bid_hours *100,0) : 100;
$html = '<div class="row box1">\'+
\'<div class="col-xs-4 col-sm-4 col-md-4">\'+
\'<img class="img-responsive thumbnail" src="http://i.imgur.com/jYea7Id.jpg?1">\'+
\'</div>\'+
\'<div class="col-xs-8 col-sm-8 col-md-8">\'+
\'<h6 >'.$row3['artwork_name'].'<span id="percentage">'.$percentage.'%</span> </h6>\'+
\'</div>\'+
\'</div>';
$snippet = '<script type="text/javascript">
$(document).ready(function() {
$("#on_going_art").append(\''.$html.'\');
});
</script>';
echo '<div id="on_going_art"></div>';
echo $snippet;
I refactored the code to make it more maintainable. In javascript you cannot just throw html into an append function. New lines need to be concatenated using + and single or quotes. That is built in now. Also since only the percentage is either 100 or variable, i put that lot into one variable.
Your quotes are messed up.
And you have multiple echos inside the string, I guess you just copied the code and put it into the string.
It would be easier to build the html first, put it into a var, then use it:
if($hours_completed_artwork < $highest_bid_hours) {
$html = "<div class=\"row box1\">
<div class=\"col-xs-4 col-sm-4 col-md-4\">
<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\">
</div>
<div class=\"col-xs-8 col-sm-8 col-md-8\">
<h6 >".$row3['artwork_name']."<span id=\"percentage\">".number_format($hours_completed_artwork/ $highest_bid_hours *100,0)."%</span> </h6>
</div>
</div>";
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$(\"#on_going_art\").append('".$html."');
});
</script>";
//....
Even better would be the use of HEREDOC or NEWDOC
Anyway the structure seems a little odd to me. Why don't you include the html via php in first place? Does it really have to be added later via javascript?
By compiling this, display three image get my database and show it, when i click each image popup window show last image of my database.I want to know how to display the particular image, when i click first image,then popup window show first image and description, as well as same way second and third image. check to array loop in this code...
enter code here
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN = array();
$i=0;
$firstN = '<img src="'.$row ['image'].'">';
echo ' <a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ' ; echo $productname;echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
<div id="myModal" class="reveal-modal">
<form>
<table>
<tr><td><?php echo $r; ?></td>
<td><h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p></td>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
I guess you have the images stored in the database like BLOB data. If so you need to create a handler to retrieve those images and render them as image/[mime]...
So in short.
In your code you need to create a new file iz get_image.php in it you need to make a request to the server and retrieve the image so you can send it to the client.
In your code you need to change the image path to the handler path with some query parameters.
$firstN = '<img src="get_image.php?imageid='.$row ['productid'].'">';
There are a lot information how to render the image to the client from the internet.
may be you have to declare your $firstN = array(); and then incrementor $i=0; out of while loop and put in array like this:
$firstN[$i] = '<img src="'.$row['image'].'">';
below is the full code:
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
$firstN = array();
$i=0;
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN[$i] = '<img src="'.$row['image'].'">';
echo '<a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ';
echo $productname;
echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
Updates:
You have a space here:
$firstN[$i] = '<img src="'.$row['image'].'">';
//-----------------------------^----here at this code block;
To get the last image , you need to modify your query to have SORT BY productid DESC
To display the images
echo "<a href='xxx.php?imgid=$image'><img src='yourimagesfolderpath/$image.jpg'> </a>";
to navigate in the images , you have to use JQUERY
That's a simple script to adult content site I'd make with pieces of another codes. I am not a expertin PHP! I just can understand the basic.
<html>
<body>
<div align="center">
<div align="center" id="box">
<div align="center" id="carrosel">
<?php
$quantidade = 64;
$pagina = (isset($_GET['pagina'])) ? (int)$_GET['pagina'] : 1;
$inicio = ($quantidade * $pagina) - $quantidade;
$sql = "SELECT * FROM teen ORDER BY RAND() ASC LIMIT $inicio, $quantidade";
$qr = mysql_query($sql) or die(mysql_error());
while($ln = mysql_fetch_assoc($qr)){
?>
So, my problem is here. In that way, when you click the thumb, the browser will open that url that is out my site. the idea is to embed the video on a new iframe page. Someone can help me?
<a href="<?php echo $ln['url_video'];?>"target="_blank">
<img src="<?php echo $ln['thumb_video'];?>" /></a>
<?php
}
?>
<div align="center">
<?php
$sqlTotal = "SELECT thumb FROM teen";
$qrTotal = mysql_query($sqlTotal) or die(mysql_error());
$numTotal = mysql_num_rows($qrTotal);
$totalPagina= ceil($numTotal/$quantidade);
for($i = 1; $i <= $totalPagina; $i++){
if($i == $pagina)
echo $i;
else
echo "$i ";
}
?>
</div><br><br>
</body>
</html>
_blank : Opens the linked document in a new window or tab
_self : Opens the linked document in the same frame as it was clicked (this is default)
_parent : Opens the linked document in the parent frame
_top : Opens the linked document in the full body of the window
Or you can use iframe .or embed some players to play the video in the same area.
Use echo to print your links
while($ln = mysql_fetch_assoc($qr)){
echo '<a href='.$ln['url_video'].'target="_blank">',
'<img src='.$ln['thumb_video'].'/></a>';
}
And I found one more thing replace your echo "$i "; with this:
echo '$i';
And one more thing, use mysqli instead of mysql
You can also use window.open function, it will open the video in a new popup,
<a href="Javascript:;" onclick="window.open('<?php echo $ln['url_video'];?>',
'View Video')" ><img src="<?php echo $ln['thumb_video'];?>" /></a>
More details for window.open at http://www.w3schools.com/jsref/met_win_open.asp
I am doing gallery and I need some help. I have uploaded images to database through website - they are stored in MySQL (names) and in folder called images. What I want is to display (miniatures) them in line and on click enlarge them.
What my code does is displaying miniatures and links them to nothing :/ ...
This is my code:
<?php
$hostname_connect= "localhost";
$database_connect= "gallery";
$username_connect= "root";
$password_connect= "root";
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
#mysql_select_db($database_connect) or die (mysql_error());
$query_image = "SELECT * FROM gallery_images";
$result = mysql_query($query_image);
if(mysql_num_rows($result) > 0)
{
while($row = mysql_fetch_array($result))
{
?>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
while($row = mysql_fetch_array($result))
{
?>
<div id="light" class="white_content">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="" alt=""></a>';
?>
Close
</div>
<?php
}
}
else
{
echo 'File name not found in database';
}
?>
You are using this in a loop:
<div id="light" class="white_content">
So you will have multiple elements with the same ID and that is not allowed.
Then you try to access them like:
document.getElementById('light')
Which will give you the first element it finds and not the actual one you want to enlarge (unless it is the first...).
Personally I would use the standard lightbox solution, link your thumbnail to your big image (instead of javascript:void(0)) and use the href attribute of your link to set the source for the big image using javascript when the thumbnail gets clicked.
Edit: An example for the html to get you started:
<?php
while($row = mysql_fetch_array($result))
{
?>
<a href="<?php echo 'images/'.$row["image"]; ?>" onclick="return showImage(this);">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
?>
<div id="light"><img src='' alt=''></div>
Now you just have to write the showImage() function in javascript that will do the actual work:
get the href attribute of the clicked link;
set the source of the image in #light to that value;
show the #light element.