Develop Reference

how to transfer value one page to another use javascript

I want to open a comment page, When someone click on the image.
I'm getting all the images from database and added onclick event listener to open the comment page.
i also want to transfer image id (id of clicked img ) which is 'IDpic' in database as value for comment page. below is the code Snippet.
<?php
error_reporting (0);
$cat;
include 'dbcon.php';
$cat=$_SESSION["cat"];
$sql = "SELECT img FROM img WHERE cat LIKE '$cat'";
$result = mysqli_query($conn, $sql);
if($cat!=""){
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left onclick="clickedButton()" />';
}
} else {
echo "no pic upload ";
}
}
mysqli_close($conn);
?>
<script type="text/javascript" language="JavaScript">
function clickedButton() {
window.location = 'cmnt.php';
}
</script>
I want the solution without jQuery !

Why not just give:
<a href="cmnt.php?id=12">
No JavaScript also!

To do
Remove your onClick Event.
Remove JS Code (clickedButton Function).
Why should you remove it?
Your case doesn't require a JS method. Your image is enclosed by an Anchor tag that has your link. That will take care of your need.
Try the code below.
<?php
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left />';
?>

You can put your page in a form and set and store the link in hidden input type and retrieve it using GET , POST methods
You can use window variables if you want if page does not reload.
Use window.location = '/your_page?data=' + name;

Wordpress news like event slider

I want do something like that - http://imgur.com/kCgH0Jf
I have only function to show 6 posts, but i don't know how do it with content show like a photo.
function six_images_slider() {
$args = array('numberposts' => 18, 'category' => 22);
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
$output = '<div class="slide">';
foreach ($recent_posts as $post) {
$featured_permalink = get_permalink($post['ID']);
$featured_title = get_the_title($post['ID']);
$featured_date = get_the_time('d.m.Y');
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
if ($i == 1) {
$output .= '<div class="col-6 border-l-r">
<big class="white">30</big>
<br /><span class="font-m cream">SIERPIEŃ</span>
</div>';
}
$output .= '';
if ($i == 6) {
$output .= ' </div>';
$i = 0;
}
$i++;
}
$output .= '</div>';
echo $output;
}
I using slick slider to slide next news and more
This is code to whole page:
<section id="wydarzenia" class="page">
<h2>O nas</h2>
<h1>Na Lato Day & Night</h1>
<p>content hover news</p>
<article>
<?php six_image_slider(); ?>
</article>
</section>

Well the link you shared have taken a very different and efficient route. If you look closely, on pressing the next button, the url changes and it takes a sec to load the new page. This means, its not using an image slider and every post has its own comments and description. I dont think its built on wordpress, but if you want to make something like this wordpress, then its much simpler then you expect.
The wordpress way of doing something like this would be as follows.
You need to create a custom post type, and call it something like gallery. Now every post in that gallery will have content area where you can add the images and details about the images, and it will have comments related to that post. Now you can also create categories inside the gallery, and every post will be linked to a gallery. Now when you view a post it will have a next button which will link to the next post from the same category. This way its much more effecient, managable and much much faster :)

how to load more images from a folder using php jquery ajax

i have multiple folders and all folders contain some images upto 20 images.
in my html page i want to show first 5 images and show click to view more 15
and when the user click that link it will show next 15 images
but till now i can only fetch all the images at a time
here is my code
<?php
$dirname = "img/outlets/".$service_type."/". $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");
foreach($images as $image)
{
?>
<a href="<?php echo $image ?>" class="imageHover">
<img src="<?php echo $image ?>" class="img-responsive" />
</a>
<?php
}
?>

I am sorry for not being supportive or all but I think you should ask or research about "pagination". What you are asking is a definition of pagination.
Actually you are asking , "How do I implement pagination ?"
http://codular.com/implementing-pagination
http://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928
and here is some code you can try to implement simple pagination
try {
// Find out how many items are in the table
$total = $dbh->query('
SELECT
COUNT(*)
FROM
table
')->fetchColumn();
// How many items to list per page
$limit = 20;
// How many pages will there be
$pages = ceil($total / $limit);
// What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
'options' => array(
'default' => 1,
'min_range' => 1,
),
)));
// Calculate the offset for the query
$offset = ($page - 1) * $limit;
// Some information to display to the user
$start = $offset + 1;
$end = min(($offset + $limit), $total);
// The "back" link
$prevlink = ($page > 1) ? '« ‹' : '<span class="disabled">«</span> <span class="disabled">‹</span>';
// The "forward" link
$nextlink = ($page < $pages) ? '› »' : '<span class="disabled">›</span> <span class="disabled">»</span>';
// Display the paging information
echo '<div id="paging"><p>', $prevlink, ' Page ', $page, ' of ', $pages, ' pages, displaying ', $start, '-', $end, ' of ', $total, ' results ', $nextlink, ' </p></div>';
// Prepare the paged query
$stmt = $dbh->prepare('
SELECT
*
FROM
table
ORDER BY
name
LIMIT
:limit
OFFSET
:offset
');
// Bind the query params
$stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
// Do we have any results?
if ($stmt->rowCount() > 0) {
// Define how we want to fetch the results
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$iterator = new IteratorIterator($stmt);
// Display the results
foreach ($iterator as $row) {
echo '<p>', $row['name'], '</p>';
}
} else {
echo '<p>No results could be displayed.</p>';
}
} catch (Exception $e) {
echo '<p>', $e->getMessage(), '</p>';
}
Simple PHP Pagination script

If I understood you correctly, you want your first page to display 5 images. Then, after clicking on a link, you want the same page to show the remaining images (from 5 up until the number of images in the folder – maybe 20 in your case).
I've been a bit verbose just so that it's clear. I've also left you echoing file paths as your code specifies, but presumably you're going to want to turn these into URLs. I'll leave that to you.
Try something like this:
<?php
$dirname = "img/outlets/".$service_type."/". $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");
$initial_images = 5; // However many you want to display on the inital load
// Get the starting image and the end image array keys
if($_GET['show_all_images']){ // Check the the browser sent a query parameter
// We've been asked to display more
// Get the array index of the first image. Remember that arrays start at 0, so subtract 1
$first_image_index = $initial_images - 1;
// Get the array index of the last image
$last_image_index = count($images);
}
else{
// We're on the inital load
$first_image_index = 0;
$last_image_index = $initial_images - 1;
}
// Iterate the glob using for. We want to specify an array key, so it's easier here to use for rather than foreach (which is the right solution most of the time)
for ($i=$first_image_index; $i < $last_image_index; $i++):?>
<a href="<?php echo $images[$i] ?>" class="imageHover">
<img src="<?php echo $images[$i] ?>" class="img-responsive" />
</a>
<?php endfor;?>
<?php if($_GET['show_all_images']): // Display a 'show less' link?>
Show less
<?php else: ?>
Show more
<?php endif; ?>

A simple way is to name images to end with indexed. Example being img_1.
You can then use ajax to fetch the last 15 images when user clicks on view more.
But this approach is very basic and is not scalable. As other answers suggest you can mix pagination with indexed image name approach

Expanding the content by click it

When i click the more. I wanted the content should expand. I my page i have about 10 question with more option. The question content is coming through the php script.
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class=\"spanstyle\" id=\"fullquestion\">" . substr($question, 0, 170);
echo "...more</span><br>";
}
}
?>
I try to do that by javascript. ContectExpand() fire of when i click.
<script>
function contentExpand() {
var question = <?php echo $question; ?>;
document.getElementById("content").innerHTML = question;
}
</script>
Problem is, $question is changing the value as it is inside the loop. It doesn't have a fixed value.
Also I want to know that I can do that only along with php without javascipt.

For my solution you need some sort of $data['id'], which is unique for each question.. I think it cannot be done only in PHP, but you should try to use jQuery, it makes javascript much easier
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class='spanstyle' id='shortQuestion{$data['id']}'>" . substr($question, 0, 170).
"...<a href='#' onClick='return contentExpand({$data['id']});'>more</a></span>
<span class='spanstyle' id='longQuestion{$data['id']}'>{$data['question']}</span>
<br>";
}
}
?>
Javascript
<script>
function contentExpand( fullcontentId ) {
document.getElementById('shortQuestion'+fullcontentId).style.display = "none";
document.getElementById('longQuestion'+fullcontentId).style.display = "inline";
return false;
}
</script>

There are several issues with you code. Regarding your question, the most important are:
The while loop is generating several span elements with the same id.
The onClick function should content a reference to the element you want to expand.
You dind't include any code constraining the size of the span element, so there is nothing to be expanded.
How to fix them:
Modify the while loop
Create a $i variable that counts the rows and add it to the span id, to the link id and to the javascript function in this way:
$i = 0;
while($data = mysqli_fetch_assoc($result)) {
$i++;
$question = $data['question'];
echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
echo "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
echo $question."</span><br>";
}
Create a javascript function that resize the span element:
You didn't tell us how you want to expand the content. There would be a lot of different ways to achieve it. This is just one that tries to respect your HTML markup, but surely not the best:
<script>
function contentExpand(id) {
var link = document.getElementById('link_'+id);
var span = document.getElementById('fullquestion_'+id);
if(link.innerHTML=='more')
{
link.innerHTML = 'less';
span.style.width = '100px';
}else{
link.innerHTML = 'more';
span.style.width = 'auto';
}
}
</script>
Modify the css of the span element:
A block element like a div would suit better anyway, but maybe you have very good reasons to use a span.
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
How to do it without javascript (just PHP):
It is certainly possible, but I guess you don't want to do it.
But if still you want to do so, generate the loop with just partial information about the related $question (as you do in the original code, substr($question, 0, 170)) but put the elements inside a form.
When the user click the more span element, submit the form to send from the client back to the server the information about the selected item.
Then, the PHP script would generate again the page but, this time, the selected item will load the full text of the question ($question instead of substr($question, 0, 170)).
So, you will have to make a new HTTP request call (that means to reload the page, AJAX is not an option if you don't want to use javascript).
Doing all this add a new layer of complexity and make it less efficient.
My advice is, if you don't have strong reasons to don't use javascript, use it.

Trying to show full size image from thumbnails retrieved using php and database

I'm trying to use thumbnails retrieved from database. PHP is working fine and displaying my thumbnails. I don't know how to get the id from database into the imageID for JavaScript function and getElementById, to display as full size when clicked. I can do straight JavaScript inline onsubmit in my code. The inline JavaScript is working; the thumbnail is being displayed, and when clicked a full size shows, but I want to use my database retrieved images to show the full size image when clicked. Do you think you can help me with my code?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
//function that shows full sized image of the thumbnail
function showImage(imageID) {
//first hide all images
document.getElementById('image1').style.display = 'none';
//then display the one that had its thumbnail clicked.
document.getElementById(imageID).style.display = '';
}
</script>
</head>
<body>
<h1></h1>
<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "travel1";
$conn = new mysqli($host, $user, $pass, $database);
if ($conn->connect_error)
die ("Unable to connect to database: " . $conn->connect_error );
$sql = "select * from what_to_do
where DESTINATION='NEW YORK CITY'";
$result = $conn->query($sql);
if ($result->num_rows >= 0) {
echo "<table>";
while($row = $result->fetch_assoc()) {
echo "<td>".$row["THUMBNAIL"]."</td>";
}
echo "</table>";
}
else {
echo "You have no destinations";
}
$conn->close();
?>
<p>
<img id="image1" alt="" src="images/NewYork/Pick7/9-11show.jpg"
style="display: none" />
</p>
<p>
<img alt="" src="="images/NewYork/Pick7/9-11thumb.JPG"style="width:100px;
height:100px" onclick="showImage('image1')" />
</p>

In this code the second img tag is closed prematurely, like src="something" etc etc. If that tag were properly formed, I think this should work?
Otherwise, you would just do something like " src="/blah" />
Hopefully that answers your question?
And then for the I onclick function just do essentially the same thing.

I'm going to presume a lot, but here goes!
The above answer is correct, you are prematurely closing an image tag at the bottom of your code, it should be like this:
<img alt="" src="images/NewYork/Pick7/9-11thumb.JPG" style="width:100px;
height:100px;" onclick="showImage('image1')" />
But otherwise there are a few other issues to address...
First, by typing in the specific name of the destination for each query on every page you'll be defeating the purpose in using a database! Just like you've mentioned, you need to use the ID and pull in the data accordingly.
To do this you need to define what the ID is by letting the user select the destination on a previous page/section(in your example a destination list might be appropriate with all the destinations in some kind of order, be that ascending or descending ect... PHP has a few different ways.)
So first, the query to sort by ID is:
SELECT * FROM travel1 order by id desc
and then to set the ID in the URL when the destination link is clicked, here's an example link using php to carry the ID to the next page:
more info
Once you get to the destination info page(that's what I'm calling your above code), filter your data so that you can access the specific destination by ID by firstly adding this to your page(after you've connected to the database that is):
<?php
if(isset($_GET['id'])){
$id = preg_replace('#[^0-9]#i', '',$_GET['id']);
$result = $con->query("SELECT * FROM travel1 WHERE id='$id' ");
while($rows = $result->fetch_assoc()) {
echo "<td>".$row["THUMBNAIL"]."</td>";
}
} else {
echo "We're having some issues...";
}
?>
The above code will pick up the database ID from your URL which was carried over from the previous page(your new destination list) and can be echoed out like your other links such as:
'echo "<td>".$row["THUMBNAIL"]."</td>";'
I hope this helped! =D