im new in php programming, my problem is i want to zoom every image displayed in a while loop. here is my code..
$query = mysqli_query($conn,"SELECT * FROM room");
while($display = mysqli_fetch_assoc($query))
{
<tr>
<td>
<div id="imageContainer"><!-- zoom id -->
<div style="margin-left:15px;">
<img width=120 height=70 class="thumbnail" src='<?php echo $display['image'];?>'>
</div>
</div>
</td>
</tr>
So you must put there some javascript or jquery (and more frameworks :D) code that will zoom on them,php cant zoom on image.
And there is a question how you want to zoom them.There are many possibilities to do that.You have miniatures of your pics and click on them make them somewhere bigger or how ? And I think that you have even the code what you placed here bad you are combining html a php.
Related
Please am new in computer programming and am using php to develop a music website but i ran into a problem to keep occuring in different project that i have being building.
The problem is when ever am using a grid system either a css grid or a bootstrap grid system the grid keeps breaking due to padding to keeps adding automatically to any side of the grid as i uses the foreach loop to loop over many element on any side of the grid layout, this problem will always occur as far as one side of the grid has my content than the other side like maybe my side bar has many content that the main grid content vice versa ... please i don't know what to do, am using a css grid right now.. here are some screeen shot of how it will look..
enter image description here
Here is a sample of how i use my foreach loop to display many content from my database.
<?php $post = new media_data();
$posts = $post->get_posts(5);
$num_rows = $posts->num_rows;
echo '
<div class="show-slide-container">
<?php foreach ($posts as $no => $post) {
<div class="my-slides fade">
<div class="txt-number-sl">
<?php $no + 1 ?> / <?php $num_rows ?>
</div>
<a href="<?php 'single_posts.php?post-slug=' . $post['slug'] ?>">
<img class="img-sl" src="<?php 'static/images/' . $post['image']; ?>"
alt="<?php html_entity_decode(substrwords($post['title'], 230)); ?>">
</a>
<div class="txt-body-sl">
<?php html_entity_decode(substrwords($post['title'], 100)); ?>
</div>
</div>
'
} ?>
I am developing a gallery website where users can visit images that other people have shared. I have created the gallery and images can be viewed using thumbnails and the images upload from the right of the previsous image. If an image is at the edge of the page the next image will go in the row beneath it. I use this code to do this:
<?php
mysql_connect("localhost","root","");
mysql_select_db("pardeepsandhu");
$res= mysql_query("select * from images");
$row=mysql_fetch_array($res)
?>
<div id="w">
<div id="content">
<div id="images"><?php while ($row=mysql_fetch_array($res)){?>
<img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" />
<?php } ?>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#images a').lightBox();
});
</script>
However, i am now trying to get a voting system set up. At the bottom of each image there would be a button which will give an image a like. The button works however the images, with the buttons, are being laid out differently. All the images appear one beneath the other, it looks like they are in on column. I don't want this to happen as space will be wasted. This is the code with a button:
<div id="w">
<div id="content">
<div id="images"><?php while ($row=mysql_fetch_array($res)){?>
<img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" />
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="Like this image" />
</form>
<?php } ?>
How do I get the images to load like they did before, so that they appear in rows rather than in one column. Can anyone help me?
To achieve a horizontal layout, you will need to use the css "display:inline-block;" on all of your image / link containers. If I were you, I would have another div which contains all the image and voting info. Also, please make sure you are closing all of your divs as this can dramatically change your layout.
Something along the lines of this should get them horizontal.
<div id="pic" style="display: inline-block;">
<img src="">
<form></form>
</div>
http://jsfiddle.net/u9gSD/
I am trying to pull some information from my database and put it in a modal. I went to the foundations website and tried to figure it out from their docs section. I dont exactly understand it. So I have a section of my site that allows users to request to delete a song they uploaded. Now if they click the X a modal should pop up and ask to confirm.
<div class="row">
<div class="large-8 column musicup">
<p> <?php echo "No music uploaded..."; ?> </p>
</div>
</div>
<?php
}else{
?>
<h2 style="margin-top:1em;">Music uploaded</h2>
<hr style="opacity:.4;">
<?php
while($row_a = mysql_fetch_array($res))
{
?>
<div class="row">
<div class="large-4 column musicup">
<p><?php echo $row_a['title']; ?></p>
</div>
<div class="large-3 column musicup"><span data-tooltip class="has-tip tip-top" title="<?php echo $row_a['reason']; ?>">
<div class="button <?php echo $row_a['status'];?>"><?php echo $row_a['status'];?></div>
</span></div>
<div class="large-3 column musicup_date">
<p><?php echo date('F j Y',strtotime($row_a['uploaded'])); ?> </p>
</div>
<div class="large-2 column musicup">
<p>X</p>
</div>
</div>
<?php
}
}
}
?>
</div>
So now I have the modal and all the database queries on a new page called song_delete.php.
Here is the code for that:
<?php
include_once "functions.php";
$query = sprintf("SELECT * FROM songs WHERE user_id = %d AND song_id = %d",$_SESSION['user_id'], $_GET['id']);
$res = mysql_query($query) or die('Error: '.mysql_error ());
$row_a = mysql_fetch_assoc($res);
$totalRows_a = mysql_num_rows($res);
?>
<div id="deleteMusic" class="reveal-modal medium">
<h2>Request to delete<span style="color:#F7D745;"> <?php echo $row_a['title']; ?></h2>
<p class="lead">Are you sure you want to delete this song? Please allow 2 full business weeks for deletion.</p>
<span style="float:right;">Cancel
Submit </span>
<a class="close-reveal-modal">×</a>
</div>
Thanks for any help in advance. I appreciate it.
Please dont tell me about the mysql_query and how I should use PDO or MySQLi and OOP i know this, but this site is not currently coded with all that..
OK first things first - its often better to look at the compile source (HTML Source Code) in these cases. Can you do this? From the code you've given it looks fine but without the css/js linking and showing the placement of the reveal code there's no way to tell.
How Foundation Reveals Work
1 - The modal code is placed just before the ending </body>.
2 - It should look something like this:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
3 - Depending on the size you want you can use an extra class of .small (for a reveal size of 30% browser width. Or one of these (taken directly from Foundation Docs)
.medium: Set the width to 40%.
.large: Set the width to 60%.
.xlarge: Set the width to 70%.
.expand: Set the width to 95%.
4 - At this point you can attach data-reveal-id="<id of modal here>" or call the modal via foundation. At this point your modal will popup in all Foundation 4 supported browsers. However you need the javascript files to close it.
5 - Now make sure you have the necessary scripts
<!-- If running version with default scripts -->
<script src="foundation.js"></script>
<script src="foundation.reveal.js"></script>
6 - Then call $(document).foundation() and then via the magical jQuery javascript library it should work as intended :-).
Extras
You can add extras attributes to reveal if you wish this way (List of all the attributes
):
$(document).foundation('reveal',<options here>,<callback>)
Lastly you might want to take the ajax tag off this (you aren't calling any content in asynchronously - it's all compiled at runtime via your server
The images are stored in my folder and not in database. When i click on one of the images, it will lead me to see more info on the next page. This would means that i can see the image with a bigger size.
How do I do this with less php pages created? Below are snippets of my codes
<table>
<tr>
<th class="timgB"><h4><img src="city/GVcementMixture.jpg" style="vertical-align: text-bottom;" title="Cement Mixture"/> Cement Mixture </a></h4></th>
</tr>
</table>
You could keep it all in one form/page with a big if/else or switch/case statement to evaluate the selected image and show only info pertaining to the selected image such as the full size image or a sub-set of child images. But it would be best presented in jQuery as #Razor said.
<form ...>
<button type=submit name=imgID value=1>
<button type=submit name=imgID value=2>
...
<?php
if (isset($_POST['imgID'])):
// Show info related to selected image
...
you can do it like this. use class="small for make image size small and class="big-img" to big size image. the ?img=img23.jpg in your link decide which image should be shown with big size. or if you use thumbnail of image as small size and want to show a full size only when some one click on thumbnail then update the link in upper div (class="big-img") or leave comment.
//it will work as you want
<body>
<div class = "big-img"> <!-- set class to show big size image-->
<?php if(isset($_GET['img'])): ?>
<img src="city/.<?php echo $_GET['img']; ?>" alt="">
<?php endif; ?>
</div>
<table>
<tr><!-- set class to show small size image-->
<td class = "small"><img src="city/img23.jpg" alt=""></td>
<td class = "small"><img src="city/img24.jpg" alt=""></td>
<td class = "small"><img src="city/img25.jpg" alt=""></td>
</tr>
</table>
</body>
i have bellow code which display 10 items and each item in each of table
<div class="baner_main shadow">
<div id="adds">
<div class="latest_ads">
<table border="0" cellspacing="0" style="width:800px">
<tbody>
<tr class="">
<?php
for($i=;$i<=10;$i++)
{
?>
<td class="even">
<img src="images/photo.gif" alt="" title=""><br>
<h3>Item Name</h3>
<p><strong>Price: 70.00 USD <br> () <br> December 3, 2011</strong></p>
</td>
<?php
}
?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
in 800 width of table it only show 5 items on screen one time.
what i need is
Move the first item and bring the next five items automatically after 10 sec using Jquery.
A small dot under table to move items next and previous with jquery.
this is common in image slide shows but i can't find any idea how to do with table.
if available give me any example link and i will it myself.
Thanks
You can use jQuery cycle plugin http://malsup.com/jquery/cycle/ and check http://malsup.com/jquery/cycle/div.html for grouping set of items together. Most of the examples provided are Div based layouts. However, You can achieve the same effect using TD's as well. Let me know if you still need help