So I have the AJAX on my website working, a live example can be found here: www.mathewhood.com.
What I was curious about though was how to change my url when clicked from http://mathewhood.com/#http://mathewhood.com/sitefiles/2011/08/hello-w
to something more like http://www.mathewhood.com/sitefiles/#hello-w or something along that nature. Preferably without the /sitefiles/ as that is mainly a security thing.
I will post my code below, if anyone has experience with href defining and knows how wordpress works with it your help would be greatly appreciated!!!!
ajax.js
$(document).ready(function() {
// Check for hash value in URL
var href = $('.recentPost a').each(function(){
var hash = window.location.hash.substr(1);
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#.recentPost a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#theContainer').remove();
$('#theContainer').append('<span id="load">LOADING...</span>');
$('#theContainer').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#theContainer').fadeOut('normal');
}
return false;
});
});
header.php
<!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>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ajax.js"></script>
<script>
$(document).ready(function() {
//move the image in pixel
var move = 8;
//zoom percentage, 1.2 =120%
var zoom = 1;
//On mouse over those thumbnail
$('.recentPost').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.recentPost').width() * zoom;
height = $('.recentPost').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<script>
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
</script>
<?php wp_head();?>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="headerWrap">
<div id="logo"></div>
<div id="nav"></div>
</div>
page_home.php
<?php
/*
Template Name: Home
*/
?>
<?php get_header();?>
<div id="contentWrap">
<div id="content"></div>
<div id="newBanner"></div>
<?php query_posts('category_name=portfolio&showposts=12'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="recentPost">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('204, 144', array('class' => 'thumbs')); ?>
</a>
<a href="<?php the_permalink();?>">
<div class="caption">
<div class="captionTitle"><?php the_title(); ?></div>
<p><?php the_content();?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<div class="cleared"></div>
</div>
<?php get_footer();?>
single_portfolio.php
<?php
/*
Template Name: Single Portfolio
*/
?>
<?php get_header();?>
<div id="contentWrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="content">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer();?>
Is this the code you need?
window.location.url = "http://mathewhood.com/sitefiles/2011/08";
window.location.hash = "hello-w";
.. or am I missing something.
It's not exactly clear what you are trying to do. Why are you posting so much of your code?
Related
I'm new to Codeigniter MVC framework. when i send data through ajax from views to controller this error shows click here to view the image
here is my code :
views/ajax_post_view.php :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".submit").click(function(e){
e.preventDefault();
var user_name = $("input#name").val();
var password = $("input#pwd").val();
//alert(user_name);
//alert(password);
$.ajax({
type:'POST',
url:'<?php echo base_url();?>'+'index.php/ajax_controller/submit',
dataType:'json',
data:{name:user_name,pwd:password},
success:function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<div class="main">
<div id="content">
<h2 id="form-head">Pavan Code Igniter Ajax</h2>
<hr>
<div id="form_input">
<?php
echo form_open();
echo form_label('User Name');
$data_name = array(
'name'=>'name',
'class'=>'input_box',
'placeholder'=>'Please enter name',
'id'=>'name'
);
echo form_input($data_name);
echo "<br>";
echo "<br>";
echo form_label('Password');
$data_name = array(
'type'=>'password',
'name'=>'pwd',
'class'=>'input_box',
'placeholder'=>'Please enter Password',
'id'=>'pwd'
);
echo form_input($data_name);
?>
</div>
<div id="form_button">
<?php echo form_submit('submit','Submit','class="submit"');?>
</div>
<?php
echo form_close();
?>
</div>
</div>
</body>
</html>
controller : controllers/Ajax_controller.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Ajax_controller extends CI_Controller {
// Show view Page
public function index(){
$this->load->helper('form');
$this->load->helper('url');
$this->load->view("ajax_post_view");
}
// This function call from AJAX
public function submit() {
$data = array(
'username' => $this->input->post('name'),
'pwd'=>$this->input->post('pwd')
);
echo json_encode($data);
}
}
?>
KINDLY HELP ME THANKS IN ADVANCE
In the controller, set Access-Control-Allow-Origin at the top of your php script :
header('Access-Control-Allow-Origin: *');
I have this PHP and jQuery code which works in coalition with my database. This is the only page. The code runs and gives me a row of data, but when I click the collapse button it only works for the first row. Even if I click any other row, that action affects only the first row and all the other rows collapse, which is useless.
How do I make it so that all rows work? It's like the button is doubled and only works for the first row.
<script>
$(function() {
$('div#dl_box').on('show', function(e) {
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
});
$('div#dl_box').on('hidden', function(e) {
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
});
});
$(document).ready(function() {});
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
sample for u.
<!DOCTYPE html>
<html>
<head>
<style>
.default {
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
}
.expanded {
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
}
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5) {
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
}
// above return in html.
// <div class="default" id="ChangeThisId_1">
// CLick me 1
// </div>
// <div class="default" id="ChangeThisId_2">
// Click me 2
// and so on till ...5
?>
</body>
<script>
function changeHeight(x){
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
}
</script>
</html>
This is using css, html(+php to create row), and native javascript.
The idea is to assign an unique for each row.
others are quite self explanatory, hope this helps.
to anyone coming in here in search of sql data display with accordian collapse. here Qid is my tables auto incremented value. AS_Questions is my table name. db is my database name.
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- 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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0) {
while ($record = mysqli_fetch_assoc($fetch)) {
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
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;
?>
<?php $x = $_GET['house_id']; ?>
<?php include 'connection.php';?>
<?php
$queryz = "SELECT * FROM photos WHERE id = $x";
$link = mysqli_query($conn, $queryz);
$lattitude = "SELECT latitude FROM location WHERE id=$x";
$lt = mysqli_query($conn,$lattitude) ;
$longitude = "SELECT longitude FROM location WHERE id=$x";
$lg = mysqli_query($conn,$longitude) ;
?>
<?php
include 'connection.php';
// Create connection
$queryz = "SELECT * FROM photos WHERE id = $x";
$link = mysqli_query($conn, $queryz);
$sql_1 = "SELECT * FROM house_info WHERE id = $x";
$result_1 = mysqli_query($conn,$sql_1);
$info = mysqli_fetch_array($result_1);
$city=$info['city'];
$type=$info['type'];
$location=$info['location'];
$landmark=$info['landmark'];
$gender=$info['gender'];
$address=$info['address'];
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/js/jquery-2.1.0.min.js"></script>
<!--<link href="../../fonts/font-awesome.css" rel="stylesheet" type="text/css">-->
<!--<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300' rel='stylesheet' type='text/css'>-->
<!--<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
<!--<link href="../../css/style.css" rel="stylesheet" type="text/css">-->
<!-- bxSlider Javascript file -->
<script src="assets/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="assets/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<style>
#map-simple { min-height: 240px; }
</style>
<title><?php echo $location;?></title>
</head>
<body class="external">
<div id="item-detail" class="content-container">
<div class="row">
<div class="col-md-8">
<div class="inner">
<!--<div class="items-switch">
<img src="ourhousesassets/img/arrow-left.png">
<img src="ourhousesassets/img/arrow-right.png">
</div>-->
<article class="animate move_from_bottom_short">
<div class="gallery">
<div class="image">
<ul class="bxslider">
<li><img height='100%' width='100%' src="addhouse/images_upload/1_1.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_2.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_3.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_4.jpg"/></li>
</ul>
</div>
</div>
</article>
<article class="animate move_from_bottom_short">
<h1><?php echo $type;?>BHK Flat, <?php echo $location;?></h1>
<h2><i class="fa fa-map-marker"></i>Near <?php echo $landmark;?></h2>
<figure class="price average-color"><span><?php echo $gender;?></span></figure>
<figure class="price average-color"><span>Availability: <?php include './ourhousesassets/totalavailability.php';?></span></figure>
</article>
<!--end Description-->
<article class="sidebar">
<div class="person animate move_from_bottom_short">
<div class="inner average-color">
<!--<figure class="person-image">
<img src="ourhousesassets/img/person-01.jpg" alt="">
</figure>-->
<header>Address</header>
<a><?php echo $address;?></a><br>
<a>Near <?php echo $landmark;?></a>
<hr>
<b>Check Rents/Availability</b>
</div>
<?php include './ourhousesassets/getroomwiserent.php';?>
</div>
<!--end .person-->
<div class="block animate move_from_bottom_short">
<dl>
<dt>Bedrooms</dt>
<dd><?php echo $type;?></dd>
<dt>Locality</dt>
<dd><?php echo $location;?></dd>
<dt>Gender</dt>
<dd><?php echo $gender;?></dd>
</dl>
</div>
<div class="block animate move_from_bottom_short">
<dl>
<h2>Bills covered</h2><hr class="one">
<dt>Electricity</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>WiFi</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>DTH</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>Maintenance</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>Gas Connection</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
</dl>
</div>
</article>
<!--end Sidebar-->
<?php include './ourhousesassets/getfurniturelist.php';?>
<?php include './ourhousesassets/getapplianceslist.php';?>
<?php include './ourhousesassets/getamenitieslist.php';?>
<article>
<h3>Map</h3>
<div id="map-simple"></div>
</article>
</div>
</div>
<!--end .col-md-8-->
</div>
<!--end .row-->
</div>
<!--end #item-detail-->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
});
</script>
<script>
var _latitude = <?php while($latt = mysqli_fetch_array($lt)){echo $latt['latitude'];}?>;
var _longitude = <?php while($lng = mysqli_fetch_array($lg)){echo $lng['longitude'];}?>;
var draggableMarker = false;
var scrollwheel = false;
var element = document.querySelector('body');
if( hasClass(element, 'external') ){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://homigo.in/ourhousesassets/js/external.js";
head.appendChild(script);
}
else {
simpleMap(_latitude, _longitude,draggableMarker, scrollwheel);
rating();
averageColor( $('.content-container') );
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
</script>
</body>
</html>
The code above uses bx slider to display four images and it's not working properly. The slides are loading, and navigating but the images are not of ful sizes. They're cropped within the div and has not smooth navigation. Please let know if any java script or any other file causing the hindrance for the slider from working properly.
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
});
});