so I have a CKeditor 5 text area, When I click the submit button, that runs gets the textarea and for the sake of this example fire that out as an alter. However the issue is that it fires out what was in the editor when it loaded not the changes I have made.
I assume I need to tell the text editor to refresh or something before I collect the variable?
does anyone have any idea on how I fix this, here is my code
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>OpsPal | Tasks</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.ico?refresh=<?php echo $refresh ?>"/>
<link href="../assets<?php echo $L ?>/css/loader.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<script src="../assets<?php echo $L ?>/js/loader.js?refresh=<?php echo $refresh ?>"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="../bootstrap<?php echo $L ?>/css/bootstrap.min.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/main.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/structure.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../plugins<?php echo $L ?>/perfect-scrollbar/perfect-scrollbar.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../plugins<?php echo $L ?>/bootstrap-select/bootstrap-select.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../assets/css/formval/screen.css?refresh=<?php echo $refresh ?>">
<!--JAVASCRIPT -->
<script src="../assets/js/libs/jquery-3.1.1.min.js?refresh=<?php echo $refresh ?>"></script>
</head>
<body>
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="layout-px-spacing">
<div class="container-responsive">
<div class="row layout-top-spacing">
<div class="col-xl-8 col-lg-10 col-md-10 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-6">
<form id="newtask" method="post" autocomplete="off" >
<label for="formGroupExampleInput">Note</label>
<div class="centered" >
<div class="row row-editor">
<div class="editor-container" style="width: 100%; margin-left: 10px; margin-right: 10px;">
<textarea required class="editor form-control" name="note" id="note" type="text">Org Text</textarea>
</div>
</div></div>
<input name="submit" type="submit" value="submit" id="submit" class="btn btn-primary">
</form>
</div></div></div></div></div>
<?php include_once("../footer.php"); ?>
</div></div></div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="../bootstrap/js/popper.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../bootstrap/js/bootstrap.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/perfect-scrollbar/perfect-scrollbar.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../assets/js/app.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/bootstrap-select/bootstrap-select.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../scripts/jquery.validate.js?refresh=<?php echo $refresh ?>"></script>
<script>
///this validates the formon the submit handler if successful it switches the button over//
$('#newpro').validate({
submitHandler: function(){
$("#save").hide();
$("#savedis").show();
$(form).ajaxSubmit();
}
});
</script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="../assets/js/custom.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/build/ckeditor.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/ckfinder/ckfinder.js?refresh=<?php echo $refresh ?>"></script>
<?php //////adds a dark theme to ckeditor////
if($theme=='D'){
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/dark.css?refresh=$refresh)' type='text/css'>";
}
else{
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/light.css?refresh=$refresh)' type='text/css'>";
}
?>
<script>
const watchdog = new CKSource.EditorWatchdog();
window.watchdog = watchdog;
watchdog.setCreator( ( element, config ) => {
return CKSource.Editor
.create( element, config )
.then( editor => {
return editor;
} )
} );
watchdog.setDestructor( editor => {
return editor.destroy();
} );
watchdog.on( 'error', handleError );
watchdog
.create( document.querySelector( '.editor' ), {
fontSize: {
options: [
'default',
8,
10,
12,
14,
16,
18,
20
]
},
ckfinder: {
uploadUrl: '../plugins/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
},
mediaEmbed: {
previewsInData: true
},
toolbar: {
items: [
'undo',
'bold',
'italic',
'underline',
'fontSize',
'alignment',
'bulletedList',
'numberedList',
'horizontalLine',
'|',
'link',
'CKFinder',
'mediaEmbed',
'insertTable',
'imageInsert',
'findAndReplace',
'highlight',
'heading',
//'sourceEditing',
],
},
language: 'en-gb',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.catch( handleError );
function handleError( error ) {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: 8kp2t5e90ll2-hyf8iacvn125' );
console.error( error );
}
</script>
<script>
$('#submit').on('click',function(){
var note= $('#note').val();
alert(note);
})
</script>
</body>
</html>
1, move the button submit script into the first script tag itself. No need to define another .
2, your variable is named watchdog, and not editor. So after you move the button submit, inside it do: console.log(watchdog.getData());.
Here, this fiddle will help: JSFiddle
If you submit in the beginning, it will output 'Old Content', then if you change the text and submit, it'll output 'New Content'. You can see the output in the console of the Fiddle.
Related
I'm trying to load a slick-slide-carousel with ajax so that when one of the radiobuttons is pressed, the new images are loaded via ajax.
But I have a problem because when loading the new images, all the images of the carousel are displayed one on top of the other for a second.
It can be seen on this page: http://infrangible-discoun.000webhostapp.com/slideAjax/, by pressing any of the radio-buttons.This is the code.
index.php:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<div id='foto'>
<div class='contenedor2 slideshow2'>
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
</div>
</div>
<div>
<form id="formOpciones" action="#" method="post">
<label for='color'>Elegir</label>
<input type="radio" class="color" name="color" value="blanco">
<input type="radio" class="color" name="color" value="negro">
<input type="radio" class="color" name="color" value="gris">
<input type="radio" class="color" name="color" value="azul">
</form>
</div>
</body>
<script src="slick2.js"></script>
</html>
ajaxIdProducto.js:
$(document).on('ready',function(){
$(document).on("change",'.color', function(event) {
var $form = $("#formOpciones");
var url1 = "obtenerFoto.php";
{
$.ajax({
type: "POST",
url: url1,
data: $form.serialize(),
success: function(data)
{
$('#foto').html(data);
}
});
}
});
});
obtenerFoto.php:
<html>
<head>
<meta charset="UTF-8">
<title>Obtener Foto</title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<script>
function slickCarousel() {
$('.slideshow2').slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
function destroyCarousel() {
if ($('.slideshow2').hasClass('slick-initialized')) {
$('.slideshow2').slick('destroy');
}
}
destroyCarousel();
slickCarousel();
</script>
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
</body>
</html>
slick2.js:
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
Maybe that's because when you call ajax obtenerFoto.php some of the scripts reload. After the script has finished loading, the slide carousel changes.
ajax request
Maybe you can try by changing the file obtenerFoto.php like this:
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
I've been testing and playing around as part of personal practice, however, I got stuck in the below point where I want to add a list of items via javascript and upon submission, I want to verify and then store the added list. However, once I submit I get an error Unidentified index as if the value is not submitted as checked by isset function and it's always returning empty. After further looking in StackOverflow, I noticed some are referring to the HTML structure; hence, I minimized the HTML to look like the below :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/libs/css/customeStyle.css">
<link rel="stylesheet" href="assets/libs/css/style.css">
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<?php //include("navBar.php"); ?>
<!-- ============================================================== -->
<!-- left sidebar -->
<!-- ============================================================== -->
<?php //include("SlideBar.php"); ?>
<!-- ============================================================== -->
<!-- end left sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<?php
if(isset($_POST["submit"])){
//$test = $_POST["patName"];
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
}
?>
<form action="#" method="POST">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
<div id="medListContainer" class="form-group">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<h5 class="card-header">List of Medication</h5>
<div class="card-body">
<div class="list-group" id="pillsList">
<button class="list-group-item list-group-item-action" value="noor">Dapibus ac facilisis in</button>
<button class="list-group-item list-group-item-action" value="btn2">Morbi leo risus</button>
<button class="list-group-item list-group-item-action" value="btn3">Porta ac consectetur ac</button>
</div>
</div>
</div>
</div>
<input class="btn btn-success" type="submit" name="submit" value="Save">
</form>
<!-- Optional JavaScript -->
<!-- jquery 3.3.1 -->
<script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<!-- bootstap bundle js -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- slimscroll js -->
<script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<!-- main js -->
<script src="assets/libs/js/main-js.js"></script>
<script>
var indexCounter=0;
$('#pillsList').on('click', function (e) {
e.preventDefault();
var targetList = document.getElementById("medListContainer");
var medValue= e.target.value;
if (indexCounter==10) {
//code
alert("you've exceeded your limit, please generate new ");
}else{
addMedList(medValue,targetList);
}
});
function addMedList(BtnValue,targetList) {
//function to place the list of selected medicaition
var btn = document.createElement("INPUT");
btn.innerHTML= BtnValue;
btn.className = "list-group-item list-group-item-action";
btn.setAttribute("value", BtnValue);
btn.setAttribute("id", 'medAdded' + indexCounter);
btn.setAttribute("name", 'medAdded' + indexCounter);
indexCounter++;
btn.setAttribute("type", "button");
targetList.appendChild(btn);
}
</script>
</body>
</html>
You've written:
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
The else block is executed when $_POST["medAdded0"] is not set. So it makes no sense to try to echo it there. Get rid of the line
echo $_POST["medAdded0"];
SCRIPT1002: Syntax error
index.php, line 4 character 37
I got this error in IE11 and my .click() handlers are not working on the page where the error occurs (only in IE11). On lines 1 to 10 I got some standart meta tags so that shouldn't be the problem (I removed them and still received the error).
Because I got a lot of code and I don't know where exactly this error occurs. What's the best way to find the responsible code for this error?
Here is the index.php file referenced in the error:
<!DOCTYPE html>
<html lang="en">
<?php
include("database/connect.php");
include("modul/session/session.php");
$sql = "SELECT * FROM `tb_appinfo`;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$appinfo = $result->fetch_assoc();
}
$sql = "SELECT * FROM `tb_ind_design` WHERE tb_user_ID = $session_userid;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$row = $result->fetch_assoc();
}
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<?php echo $appinfo["description"];?>">
<meta name="author" content="A.Person">
<title><?php echo $appinfo["title"];?></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<?php
if (preg_match("/(Trident\/(\d{2,}|7|8|9)(.*)rv:(\d{2,}))|(MSIE\ (\d{2,}|8|9)(.*)Tablet\ PC)|(Trident\/(\d{2,}|7|8|9))/", $_SERVER["HTTP_USER_AGENT"], $match) != 0) {
echo '<link href="css/evaStyles_ie.css" rel="stylesheet">';
} else {
if(isset($row)){
echo '
<meta name="theme-color" content="'.$row["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
html {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
} else {
echo '
<meta name="theme-color" content="'.$appinfo["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
html {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
}
}
?>
</head>
<body>
<div class="loadScreen">
<span class="helper"></span><img class="img-responsive" id="loadingImg" src="img/loading.svg"/>
</div>
<div id="pageContents" style="opacity: 0;">
<!-- Navigation -->
<div id="naviLink">
<nav class="navbar navbar-expand-lg navbar-inverse bg-color fixed-top" id="slideMe" style="display: none;">
<div class="container">
<a class="navbar-brand" href="modul/dashboard/dashboard.php">
<img src="<?php echo $appinfo["logo_path"];?>" width="<?php echo $appinfo["logo_width"];?>" alt="Logo">
<span style="margin-left:20px;"><?php echo $appinfo["title"];?></span>
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<?php
$userID = ($mysqli->query("SELECT ID FROM tb_user WHERE bKey = '$session_username'")->fetch_assoc());
$sql1 = "SELECT mg.ID, mm.file_path, mm.title FROM tb_ind_nav AS mg INNER JOIN tb_modul AS mm ON mm.ID = mg.tb_modul_ID WHERE mg.tb_user_ID = " . $userID['ID'] . " ORDER BY mg.position";
$result = $mysqli->query($sql1);
if (isset($result) && $result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$link = '
<li class="nav-item">
<a class="nav-link" navLinkId="'. $row["ID"].'" href="'. $row["file_path"].'">'. $translate[$row["title"]].'</a>
</li>
';
echo $link;
}
} else {
$link = '
<li class="nav-item" id="editNavLink">
<a class="nav-link" href="modul/settings/settings.php">'. $translate[15].'</a>
</li>
';
echo $link;
}
?>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-10 offset-md-1">
<div page="<?php if(isset($_SESSION["user"]["currentPath"])){ echo $_SESSION["user"]["currentPath"]; } else { echo "modul/dashboard/dashboard.php";} ?>" id="pageContent">
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer class="footer" id="slideMeFoot" style="display: none;">
<div class="container">
<a class="foot-link" href="modul/settings/settings.php"><?php echo $translate[16] ?></a><i class="text-muted"> | <?php echo $_SESSION["user"]['username']; ?></i><span class="text-muted">© HTML Link | 2018 | <?php echo $appinfo["title"];?> v.1.0</span>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Own JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script type="text/javascript">
var translate = {};
<?php
foreach ($translate as $key => $value) {
echo ("translate['".$key."'] = '".$value."';");
};
?>;
</script>
<script src="js/index.js"></script>
</body>
</html>
If you are using arrow syntax like value.foreach(param => {}); It can also cause this error in IE 11 since it does not understand shorthand functions. Need to change the function to be: value.foreach(function(param){});
The problem probably resides in your dashboard.js file. On line 4 you have a setInterval():
var id = setInterval(frame, speed, );
There is either a parameter missing or you accidentally added an extra comma.
To reproduce this you can include the dashboard.js file on any page and the syntax error will be displayed.
I want to add a simple light box plugin for my images gallery. Images are being fetched in a template called gallery-template like this
<?php
$args=array('post_type' => 'gallery');
$query= new WP_Query($args);
while ($query-> have_posts() ) : $query->the_post()?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h1 class="product_txt"><?php the_title();?></h1>
<a href=''><?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?></a>
</div>
<?php
endwhile;
?>
I've seen many plugins but they ask to add images to pages instead of getting them from a template, so how can I make it work like this?
You can do this without plugin. Use any lightbox you want. My example is with prettyphoto.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<?php
$args=array('post_type' => 'gallery');
$query= new WP_Query($args);
while ($query-> have_posts() ) : $query->the_post()?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<?php // Get image url
$attachment = wp_get_attachment_image_src( get_post_thumbnail_id($query->ID), 'full' );
$url = $attachment['0']; ?>
<h1 class="product_txt"><?php the_title();?></h1>
<a rel='prettyPhoto' href='<?php echo $url; ?>'><?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?></a>
</div>
<?php
endwhile;
?>
I wonder whether someone may be able to help please.
I'm a little new to this, so I'm sure to some this will be a basic question but please bear with me.
I'm using the script below to create a image gallery with fancyBox.
<!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">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'centerOnScroll':'true',
helpers : {
title : {
type : 'inside'
}
},
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
</script>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
</form>
</body>
</html>
The problem I'm having is that I cannot create the title inside the image, or indeed anywhere else except on 'hover over' which seems to be the default setting. I've tried all manner of different ways to try and get this to work.
i.e.
$(document).ready(function() {
$("a.fancybox").fancybox({
'centerOnScroll':'true',
'titleShow':'true',
'titlePosition':'inside',
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
and
$(document).ready(function() {
$("fancybox").fancybox({
'centerOnScroll':'true',
'titleShow':'true',
'titlePosition':'inside',
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
I've tried adding and deleting ', deleting spaces, all without success. I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.
Many thanks and regards
In this line:
<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
Try setting the title attribute inside the a, not the alt tag inside the img. So it becomes:
<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a><?php endfor; ?>
In case adding a title element to your anchor tag does not work you can force the title in your fancybox settings
$(document).ready(function() {
$("fancybox").fancybox({
'title' : 'yourtitle'
'centerOnScroll' : 'true',
'titleShow' : 'true',
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});