Using Javascript to load image into a div onClick - javascript

I've been trying for two days to figure out what I am doing wrong. I really think that this code should work, but it doesn't. If I swap out the variable on line 57 it will bring up a file onClick. So logically the problem is the variable. But when I trace the variable on line 60, the variable is returning the correct value. So why won't the image load correctly? When I click on the button, simply nothing happens.
++EDIT++
I've tried a bunch of things, and the problem is absolutely with the variable $file. No matter how I test it, $file corresponds to the id number of the item on the list. But when I hit the button, it always pulls item 1. I even went back and edited the code to read:
<img id="loadingImage" src="../maps/<?php echo $name['id']?>.gif" style="visibility:hidden"/>
There is no reason on earth that I can find that this isn't working. 'id' is iterating properly. So why does it think 'id'=1 only after I hit the button?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
<meta charset="utf-8">
<title>List of Parks</title>
<link href="guide.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script type="text/javascript" src="../jQuery/jQuery.js"></script>
<script type="text/javascript">
<!--
function showImage() {
document.getElementById('loadingImage').style.visibility = 'visible';
}
-->
</script>
</head>
<body>
<div id="container">
<div id="state"></div>
<div id="list">
<?php foreach ($datas as $name):
{
if ($name['state'] == 'PA')
{
?>
<input type="hidden" name="id" value="<?php echo $name['id']; ?>">
<h2><?php echo htmlspecialchars($name['name'], ENT_QUOTES, 'UTF-8');?></h2>
<?php htmlspecialchars($name['site'], ENT_QUOTES, 'UTF-8');?>
<?php $link = $name['site']; ?>
<ul id="link">
<li class="l1"><?php echo "<a href=$link>$link</a>" ?></li>
</ul>
<br>
<?php echo htmlspecialchars($name['description'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['street'], ENT_QUOTES, 'UTF-8');?>
<br>
<?php echo htmlspecialchars($name['city'], ENT_QUOTES, 'UTF-8');?> ,
<?php echo htmlspecialchars($name['state'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['zip'], ENT_QUOTES, 'UTF-8');?>
<?php $file = $name['id'];
$image = '../maps/'.$file.'.gif';?>
<input type="button" value="click for map" onclick="showImage();" />
<div id="trailmap">
**<img id="loadingImage" src="<?php $image ?>" style="visibility:hidden" />**
</div>
<?php echo $image?>
<hr width="100%" size="3" black />
<?php
}
}
endforeach; ?>
</div>
</div>
<div class="fixbox">
<div id="statemap"></div>
<div id="home"></div>
<div id="guide"></div>
</div>
</body>
</html>

Related

How to save multiple dynamic data in database

I am making a survey question portal in which certain questions will appear on certain conditions like if age-band='18-25' and residential status='Homeowner' then questions like what brand is your washing machine and Do you have any mortgage will appear. If age-band = 26-30 and residential-status ='Rent Council' then question "Do you have a life insurance?" This will appear. Now I have written the code to display the questions but I am unable to save the respective questions and answers in the database.
This is what I have tried so far.
(//Code for first.php)
<?php
include 'connect.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form method="POST" action="display1.php">
<select name="age_id">
<?php
$query = mysqli_query($con,"select * from age");
while ($rows = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $rows['id']?>"><?php echo $rows['age']; ?></option>
<?
}
?>
</select><br>
<select name="res_id">
<?php
$query = mysqli_query($con,"select * from residential");
while ($rows = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $rows['id']?>"><?php echo $rows['residential_status']; ?></option>
<?
}
?>
</select><br>
<input type="submit" name="sub" value="SUBMIT">
</form>
</body>
</html>
(//code for display1.php)
<?php
include 'connect.php';
$age_id = $_POST['age_id'];
$res_id = $_POST['res_id'];
$res = mysqli_query($con,"select * from parent_questions where age_id ='$age_id' && residential_id = '$res_id'");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#new{display: none;};
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- cdn link for ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="submit.php">
<tbody>
<?php
while($rows=mysqli_fetch_assoc($res)){
$opt_arr=explode("|",$rows['qoption']);
?>
<tr id="div_<?php echo $rows["qid"]; ?>">
<td><?php echo $rows['question']; ?></td>
<td>
<select class="form-control" name="<?php echo $rows['qid']; ?>">
<option value="">Select</option>
<?php
foreach($opt_arr as $v){
?>
<option value="<?php echo trim($v); ?>"><?php echo $v; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<?php
}
?>
</tbody>
<input type="submit" name="sub" value="SUBMIT">
</form>
<script type="text/javascript">
function newfun(datavalue){
document.getElementById('new').style.display='block';
$.ajax({
url: 'backend.php',
type: 'POST',
data: { datapost : datavalue},
success: function(result){
$('#getdata').html(result);
}
});
}
</script>
</body>
</html>
Now I can't use a static name for select because it will keep changing so I am just confused how will I be able to insert the respective question's option in the database like the washing machine question's option in washing machine field and insurance and mortgage options in mortagage field respectively.
You can use array based names like:
<select class="form-control" name="Rows[<?php echo $rows['qid']; ?>]">
and in php get it as $_POST['Rows']['mortagage'] or anything else.
all inputs will available in $_POST['Rows'] array
you can use <?= "s.th" ?> instead of <?php echo "s.th" ?>

JS/HTML/PHP in one PHP program and MYSQL Updates via Server Sent Events

I'm building a two-way chat application that stores messages into a MySQL database. I would like to use Server Sent Events and have the PHP and HTML all in one page but the problem I'm facing is that the header cannot be set to text/event-stream or I will break the HTML.
My question is how can I have the PHP, JS and HTML on the same page when using Server Sent Events?
Here is my opening JS. I set the EventSource to index.php even though this might be wrong.
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("index.php");
source.onmessage = function(event) {
document.getElementsByClassName("message").innerHTML = event.data;
};
}else {
document.getElementsByClassName("message").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
<h1>LoRa Chat</h1>
<?php
$SSE = (#$_SERVER["HTTP_ACCEPT"] == "text/event-stream");
if($SSE){
header('Cache-Control: no-cache');
header("Content-Type: text/event-stream");
}
else {
header("Content-Type: text/html");
}
//Database Stuff
$connect = mysqli_connect('localhost', 'user', 'Pass');
mysqli_select_db($connect,"allmessages");
$sql = "SELECT *, if(mymessages > yourmessages, mymessages, yourmessages) FROM lora_messages";
$results = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($results)) {
if ($row ['mymessages'] > $row ['yourmessages']){
?>
<div class='chat'>
<div class='mine messages'>
<div class='message'>
<?php echo "data: ".$row['mymessages']; flush();?>
</div>
</div>
<?php
}
elseif ($row ['mymessages'] < $row ['yourmessages']){
?>
<div class='chat'>
<div class='yours messages'>
<div class='message'>
<?php echo "data: ".$row['yourmessages']; flush();?>
</div>
</div>
<?php
}
}
?>
<div class="fixed">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" Method="POST">
<input type="text" id="body" name="mymessage">
<input type="submit" value="Submit" name="submit">
</form>
</div>
<br>
</body>
</html>
EDIT: I have tried separating the PHP the HTML and put the PHP logical part outside the HTML. I'm able to get Server Sent Events via inspector in Chrome but not sure how to loop through the DB entries in JS. I'm not comfortable with JS syntax.
<?php
$SSE = (#$_SERVER["HTTP_ACCEPT"] == "text/event-stream");
if($SSE){
header("Content-Type: text/event-stream");
header('Cache-Control: no-cache');
if(isset($_POST['submit'])){
$send = $_POST['mymessage'];
$sendmsg = "INSERT INTO lora_messages (mymessages, yourmessages) VALUES ('".$send."', '')";
}
if (!empty($_GET['yourmessage'])){
$recieve = $_GET['yourmessage'];
$recievemsg = "INSERT INTO lora_messages (mymessages, yourmessages) VALUES ('', '".$recieve."')";
}
$connect = mysqli_connect('localhost', 'root', 'Walcott34');
mysqli_select_db($connect,"allmessages");
$sql = "SELECT *, if(mymessages > yourmessages, mymessages, yourmessages) FROM lora_messages";
$sqlrecieve = mysqli_query($connect, $recievemsg);
$sqlsend = mysqli_query($connect, $sendmsg);
$results = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($results)) {
if ($row ['mymessages'] > $row ['yourmessages']){
echo "data: ".$row['mymessages']."\n\n";
}
elseif ($row ['mymessages'] < $row ['yourmessages']){
echo "data: ".$row['yourmessages']."\n\n";
}
ob_flush();
flush();
}
}
else {
?>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("index2.php");
source.onmessage = function(e){
document.getElementById("mymessages").innerHTML = event.data;
document.getElementById("yourmessages").innerHTML = event.data;
};
}else {
document.getElementsById('message').innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
<h1>LoRa Chat</h1>
<div class='chat'>
<div class='mine messages'>
<div class='message'>
<div id='mymessage'>
</div>
</div>
</div>
<div class='chat'>
<div class='yours messages'>
<div class='message'>
<div id='yourmessage'>
</div>
</div>
</div>
<div class="fixed">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" Method="POST">
<input type="text" id="body" name="mymessage">
<input type="submit" value="Submit" name="submit">
</form>
</div>
<br>
</body>
</html>
<?php } ?>
If your after it being in one file you just need the one outer if statement which separates the two logical parts.
<?php
if ($_SERVER["HTTP_ACCEPT"] === 'text/event-stream') {
// event stream code
...
while (true) {
...
} else {
// client side code
?>
<head>
<meta name="viewport" content="w
...
<?php }
You cant intertwine the two parts like your doing:
<div class='message'>
<?php echo "data: $row['mymessages']"; flush();?>
</div>
Your serverside part is incomplete but that's beyond the scope of the question,ive commented with a link to a working example.

Simple ajax post Uncaught ReferenceError

Hello I have a simple ajax call but I can not see the result. What am I doing wrong ? Thank You.
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function prova(SelectedFriend){
$.post("result.php", {Selected:Selected});
return false;
}
</script>
</head>
<body>
<?
$user="name1";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<?
$user="name2";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<?
$user="name3";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<div id="Result"></div>
</body>
</html>
and result.php
<?
echo $_POST['Result'];
?>
The console of my browser says "Uncaught ReferenceError: name1 is not defined" when I click on name1.
The $user must be placed inside simple quotes:
<div onclick="prova('<? echo $user; ?>')" style="cursor:pointer;">
Also your function is not using the parameter as it should:
function prova(SelectedFriend){
$.post("result.php", {SelectedFriend:SelectedFriend});
return false;
}
And the result.php file must be corrected as well:
<?php
echo $_POST['SelectedFriend'];

How to use ACE editor to edit and save a file

I'm a dummy in HTML.
In my project, I want to use ACE editor to allow the user editing and saving a file.
I succeed to load the file, and to open it with ACE editor.
The problem is how to save it.
For this part, I need your help.
Here is the code I wrote to use ACE.
<?php
if(isset($_POST["save_modification"])){
$file = "./".$_POST["file_name"];
$file_ptr=fopen($file,"w");
fwrite($file_ptr,$_POST["content"]);
fclose($file_ptr);
}?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<title>Test</title>
</head>
<body>
<div class="site">
<div class="header">
<span>Test</span>
</div>
</div>
<div class="clean"></div>
<div class="corp">
<div class="corp_ctn">
<h1>Edit a file</h1>
<div id="content" class="paragraphe">
<?php
$dir=opendir("./");
while($file=readdir($dir)){
if(!in_array($file, array(".",".."))) {
echo '<div style="float:left; margin:0 10px; text-align:center;"><a href="?f='.$file.'">';
echo $file;
echo '</a></div>';
echo '<br/>';
}
}
?>
<br clear="all"/>
<?php
if(isset($_GET["f"])) {
echo "<h1>{$_GET["f"]}</h1>";
$file = "./".$_GET["f"];
$content = file_get_contents($file);
?>
<form method="POST" action="index_select_lua_script.php">
<div id="editor" name="content" style="width:100%;height:200px;">
<?php echo $content ?>
</div>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.getSession().setTabSize(4);
editor.setHighlightActiveLine(true);
editor.resize();
</script>
<input type="hidden" name="file_name" value="<?php echo $_GET["f"] ?>" />
<input type="submit" name="save_modification" value="Save modification" />
</form>
<br/><br/>
<?php
}
?>
</div>
</div>
</div>
</div>
When I save my modification, using the save button, the content is empty.
Please, do you have an idea of how I can do it?
Thank you
The HTML5 Filesystem API handles tasks like this quite well now. There are a few ways of capturing the contents of the editor area, and once you've done that you can save it.
Look at something like:
http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://www.html5rocks.com/en/tutorials/file/filesystem/
Can't remember where, but you can ZIP files together using JS now as well, if you so wish.

Fancybox not working on CakePHP

I am trying to make a gallery, which has multiple thumbs that should popup the original image when someone clicks on them, like in the first example in the instructions page on fancybox2 page.
After multiple failed attempts, some of which where even the thumbs were not showing up. I have been suggested to use the CakePHP-Fancybox to fix this, which solved half problem. When someone clicks on the thumbs, that user is being redirected to another page that show the original image, instead of making it float on the gallery itself.
Now I get an Uncaught TypeError: Object [object Object] has no method 'fancybox' in the $(".fancybox3").fancybox({. How can this issue be fixed?
Controller:
public function ShowImages(){
$this->layout = 'default';
$this->loadModel('GalleryImage');
$gallery_images = $this->GalleryImage->find('all');
$this->set('gallery_images', $gallery_images);
//$image_display = $gallery_image['path']
}
View:
<h2>Galeria</h2>
<br>
<table width="100%">
<tr>
<?php
$i=0;
foreach( $gallery_images as $gallery_image ):?>
<td align="center" class="thumbnail" style="display:inline-block;">
<?php
$src3 =$this->webroot. 'img/gallery/' .$gallery_image['GalleryImage']['path'];
//$src3 = 'img/gallery/' .$gallery_image['GalleryImage']['path'];
$this->Fancybox->setProperties( array(
'class' => 'fancybox3',
'className' => 'fancybox.image',
'title'=>'Single Image',
'rel' => 'gallery1'
)
);
$this->Fancybox->setPreviewContent($this->Timthumb->image('/img/gallery/' . $gallery_image['GalleryImage']['path'] , array('width' => 267, 'height' => 189)));
$this->Fancybox->setMainContent($src3);
echo $this->Fancybox->output();
?>
</td>
<?php $i++;
if($i==4){
echo "</tr><tr>";
$i=0;
}
?>
<?php endforeach ?>
</tr>
</table>
Layout (head):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo $title_for_layout;//titulo dinamico da página?></title>
<?php
echo $this->Html->meta('icon');
//echo $this->Html->css('cake.generic');
echo $this->fetch('meta');
//echo $this->fetch('css');
echo $this->Html->script('jquery-1.11.0.min');
echo $this->Html->script('jquery.fancybox.pack.js?v=2.1.5');
echo $this->Html->script('main');
echo $this->Html->css('main');
echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');
echo $this->Html->css('bootstrap-theme.min');
echo $this->Html->css('bootstrap.min');
echo $this->Html->css('bootstrap');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('bootstrap');
echo $this->Html->script('dropdown');
echo $this->Html->script('collapse');
?>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript">
$(function(){
$(".dropdown-toggle").click(function(){
$(this).dropdown('toggle');
});
});
</script>
<!-- src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$home_link_image= $this->webroot."img/PushUp.png";
if(!$this->Session->check('Admin')){
$home_link = "/html/PushUp_app/";
}
else{
$home_link = "/html/PushUp_app/admins/admin_index";
}
echo "<a class=\"pushup_logo\" href=\"".$home_link."\">";
//echo" <img src=\"".$home_link_image."\" name=\"logo\" id=\"logo\"/>";
?>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<?php
//if(!$this->Session->check('User')){
echo $this->Html->link('Home', array('controller'=>'home', 'action'=>'index'));
//}
/*else{
echo $this->Html->link('Administrador', array('controller'=>'admins','action' =>'admin_index'));
}*/
?>
</li>
<li class="dropdown">
Serviços <b class="caret"></b>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li>
<li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li>
<li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li>
<li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li>
<li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li>
</ul>
</li>
<li class="dropdown">
Galeria<b class="caret"></b>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Fotografias', array('controller'=>'galleries', 'action'=>'ShowImages'))?></li>
<li><?php echo $this->Html->link('Videos', array('controller'=>'galleries', 'action'=>'ShowVideos'))?></li>
</ul>
</li>
<li><?php echo $this->Html->link('Cartaz', array('controller'=>'showbills', 'action'=>'ShowShowbill'))?></li>
<li><?php echo $this->Html->link('Contactos', array('controller'=>'contacts', 'action'=>'ShowContactUs'))?></li>
<li><?php
/* if(!$this->Session->check('User')){
echo $this->Html->link('Log-in', array('controller'=>'users','action' =>'login'));
}
else{
echo $this->Html->link('Log-out', array('controller'=>'users','action' =>'logout'));
}*/
?>
</li>
</ul>
</li>
</ul>
<!--<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>-->
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<?php echo $this->Session->flash();?>
<!-- Example row of columns --><?php echo $this->fetch('content');?><!--carrega o conteudo para a página-->
<div class="row">
<div class="col-lg-4">
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!--<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>-->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script type="text/javascript" >
$(document).ready(function() {
$(".fancybox3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'image'
}
}
});
});
</script>
<?php echo $this->Js->writeBuffer(); ?>
</body>
</html>
If you follow CakePHP-Convention you will put your Fancybox-Mediacontent into your "App/webroot/img/fancybox-media/" - Directory. If so, you're able to access the Media like:
http://www.my-app.com/img/fancybox-media/
The nice way building casual DOM-Elements in your View is using Cake's Form-Helper:
In your AppController:
class AppController extends Controller {
public $helpers = array('Form', 'Session', 'Html');
// Rest of your Code here
}
After that you'll be possible to replace the following line with the one below in your View:
Replace:
echo "<a href=\"gallery/" . $gallery_image['GalleryImage']['path'] . "\"class=\"fancybox_img\">";
echo $this->Html->image('gallery/' . $gallery_image['GalleryImage']['path'] . '', array('width' => '189px', 'height' => '267px', 'alt' => $gallery_image['GalleryImage']['path'] ));
echo "</a>";
With:
$this->Html->link(
$this->Html->image('gallery/' . $gallery_image['GalleryImage']['path'], array('width' => '189px', 'height' => '267px', 'alt' => $gallery_image['GalleryImage']['path'] )
);
And please be sure that your $gallery_image['GalleryImage']['path'] - Variable stores the name of the Image-File. Also ensure the existance of the Image (Case-Sensitive) in "App/webroot/gallery/myImage.jpeg"
Additionally post eventual thrown JS-Errors in your Browsers Dev-Console if you have one. (Try F12)

Categories

Resources