Hei
I Have this code, to take the pictures from a folder and show them on the page. But when I click on the image, it will open on the same page. So I have to click one page back...
But i wanna that when I cklick on a n image, that the image open with a popup and I can click there "back or next" to see the other images.
What I Have to change in the code?
Thanks a lot
<div id="galima">
<?php
$folder_path = 'gallery/images_nature/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
if($extension =='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<img src="<?php echo $file_path; ?>" height="250">
<?php
}
}
}
else
{
echo "the folder was empty !";
}
closedir($folder);
?>
What you need is named Lightbox but
here i am giving a simple example of creating new window in js. May be this will give you a better understanding to implement it in your code.
copy this code into any html file and see the output. i don't know why i can't
add it in code snippet -_-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="">
<img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50" height="50" alt="Click to enlarge"
onclick="enlarge(this)" />
</a>
<a href="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/0e/38/60/0e38604bb8c49acf8eb409dc5f9caa15.jpg" width="50" height="50" alt="Click to enlarge" onclick="enlarge(this)" />
</a>
<script type="text/javascript">
var windowFeatures = "'menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width=500,height=350,left=400,top=100'";
function enlarge(x) {
window.open(
x.src,
'largeimage',
windowFeatures
);
}
</script>
</body>
</html>
you can open the image in a new page using target _blank like this
...
Related
SO I try to preview an image from bbcode decoder the code work fine but issue is I need that image inside <a> href link so that people can click it and get the image source and also I put massage on that like: CLICK ON IMAGE FOR FULL SIZE,
So I put here a simple Jscript function and inside it I call a variable and put document.getElementById, after doing that then I put variable.innerHTML and put my image massage and <a href> value.
But when I run on my browser its just load like a endless loop. It just load over and over again.
Here is my full code: 1st code from php bbcode decoder and the 2nd code only html because I was not sure if my php code do that either way It not solving.
1st
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
2nd
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$ssq = "https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg";
?>
<div id="img" style="font-size:x-small; display:inline;"><img name="img" onload="linkset(this);" src="<?php echo $ssq; ?>" border="0" alt="" /></div>
Result came like that:
<div id="img1" style="font-size:x-small; display:inline;">
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<img name="img1" onload="linkset(this);" src="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" alt="" border="0"></a>
</div>
This thing loop over and over but why??????????
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
Please Help........
OK,,,,,,,, There is 2 way I tested....
1st is in JS obviously
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
you can replace you js code
here if all code:
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
And 2nd thing is that?????? why you need JS code??? you can use PHP all in all
Here is the code:
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<br>\n<a href='$matches[1]'><strong>Click on image for full size view.</strong><img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></a></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
I can not discuss about PHP code cause it is so easy to understand.... But if you want I can give you note in comment.
i'm developing a pdf book page viewer, i have many books that has more than 100 pages in my mysql database. so i fetch the book pages into my thumbnail gallery and if i select that image it will add img src to main image and display it on main image div, that works perfectly, here i have right and left arrow buttons next to main image, if i click these buttons the image should select next image or previous image. i was trying to get the idea and trying different source i could not get the output, please help me with this, i have added my codes bellow,
PHP
<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>
<ul class="book-list id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book p-2">
<span class="page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript
<script type="text/javascript">
var bookPageList = $('#book-list');
$(bookPageList).click(displayImage);
function displayImage(e) {
if (e.target !== e.currentTarget) {
var target = e.target;
var src = target.src;
// console.log(src);
$('#main-img').attr('src', src);
}
}
</script>
I have fixed this issue in this link, hope this help to other newbies
Change image by selecting from thumbnail or next prev buttons
When using below code share on Facebook but https://www.facebook.com/dialog/return/close#_=_ does nothing return.
<?php
$social_link = "https://www.google.co.in";
$sharelink = "http://www.facebook.com/sharer.php?u=".urlencode($social_link)."&t=&s=100";
$strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
echo "<script>var win = window.open('$sharelink', '_self', '$strWindowFeatures');</script>";
?>
You can create share button using the given tag and add given script in your script section
<a onclick="shareinsocialmedia('https://www.facebook.com/sharer/sharer.php?u=<?php echo $ShareUrl;?>&title=<?php echo $Title;?>')" href=""> <img src="images/facebook.gif" title="share in facebook"> </a>
<script type="text/javascript" async >
function shareinsocialmedia(url){
window.open(url,'sharein','toolbar=0,status=0,width=648,height=395');
return true;
}
</script>
I have two pages: test.php and backend.php.
test.php has three images which when clicked takes the user to backend.php. I want the src of the image clicked to be displayed on backend.php. I am trying to achieve this task via JavaScript and Ajax but the src of the image doesn't appear on backend.php. Code for the same are given below:
test.php:
<?php
session_start();
?>
<html>
<head>
<script src="jquery-1.9.1.js">
</script>
<script>
function clickIt(data){
$.ajax({
url: 'backend.php',
data: {"imgsrc":data},
type: 'post',
success:function(res){
alert(res.message);
}
});
}
</script>
</head>
<body>
<a href="backend.php">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
</html>
backend.php:
<?php
session_start();
?>
<?php
echo $_POST['imgsrc'];
echo 'Back';
?>
What am I possibly doing wrong?
Try this;
HTML:
<body>
<a href="javascript:void(0);">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
Jquery:
function clickIt(data){
window.location.href = 'backend.php?imgsrc='+data; // redirect to backend.php
}
In backend.php
<?php
echo $_GET['imgsrc']; // use $_GET
echo 'Back';
?>
Click event of tag is not firing because tag takes the
page to backend page before tag click event gets fired. You can resolve this problem simply by removing the tag from each line.
You cannot access ajax response as res.message as you haven't echo the response in json format. You can access response simply from res variable
Also change the function name to changeIt to clickIt as you have defined function has clickIt
// use only res
success:function(res)
{
alert(res);
}
<img onclick="clickIt(this.src)" src="img1.jpg"/>
<img onclick="clikcIt(this.src)" src="img2.jpg"/>
<img onclick="clickIt(this.src)" src="img3.jpg"/>
I would like to ask about the Button with Roll Over Javascript I have in my wordpress theme, the problem is the code is divided in two parts:
The 1st code is about Javascript
<script>
<!--
if(document.images)
{
var image_array = new Array();
// path to the directory with images
var path = '/img/';
// enumeration of the "active" images
image_array[0] = "<?php bloginfo('template_directory'); ?>/button1_red.png";
image_array[1] = "<?php bloginfo('template_directory'); ?>/button2_red.png";
image_array[2] = "<?php bloginfo('template_directory'); ?>/button3_red.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++)
{
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}
function rollover(name, filename)
{
var fullpath = '' + filename;
document.images[name].src = fullpath;
}
//-->
</script>
<!--ROLL OVER SCRIPT-->
and the 2nd is html.
<div id="buttons">
<a href="http://twitter.com/bendaggers" target="_blank" onmouseover=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_red.png'); onmouseout=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button2_blue.PNG" name="button2" width="35" height="35" border="0" title="Follow us on Twitter!" alt="BenDaggers.com: Follow us on Twitter!"/></a>
<a href="http://feeds.feedburner.com/bendaggers" target="_blank" onmouseover=rollover('button3','<?php bloginfo('template_directory'); ?>/button3_red.png'); onmouseout=rollover('button3','<?php bloginfo('template_directory'); ?>/button3_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button3_blue.PNG" name="button3" width="35" height="35" border="0" title="Subscribe to our RSS Feeds!" alt="BenDaggers.com: Subscribe to our RSS Feeds!" /></a>
</div>
Where should i put the javascript code since the Button should be in sidebar (sidebar.php)?
I tried putting the javascript in the index.php and the html code in sidebar.php but its not working.
Any help?
Put the HTML in sidebar.php and javascript in header.php (assuming your theme has a header.php file) inside the <head> tag.
Because your html part depends on the Javascript part, the Javascript part must go first in the page. The simplest way to ensure this without knowing much about the structure of Wordpress is simply include both snippets in the same place, say sidebar.php, one after the other.