I wonder whether someone may be able to help me please.
Firstly I apologise for what most may feel is a really simple question. But this is my first attempt so please bear with me.
I'm using the script below to create an Image Gallery with Fancybox.
UPDATED 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">
<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-thumb").fancybox({
'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-thumb" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
</form>
</body>
</html>
I can view the images, but I just can't seem to get the gallery functionality working. I've been working through the examples on the 'fancyBox' and 'fancyApps'websites, but clearly I've misunderstood something along the way.
I feel that once I get started I can format the page as I need it to look, I'll just working through the tutorials. But I just wondered if someone could perhaps please show me where I've gone wrong in creating the initial gallery.
Many thanks and regards
I're attaching your fancybox to a class called ".fancybox-thumb", yet there is no such class on the page. Instead, your links bear class called ".images"
So try replacing this line
<a class="images" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
with
<a class="fancybox-thumb" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
I haven't tested your code but that's one obvious mistake I found so far.
After the initial issues raised by #kernelpanic, #ryan and #Mr_DeLeTeD were rectified, through further testing and having looked through the documenation, the 'grey vertical stripe' was the opacity setting and not an error.
Related
So I'm trying to set the body background tag to a php variable I created, however I can't get it to correctly work.
Here is the simple PHP:
<?php
$backGround = "images/backgrounds/grey.png";
?>
and here is the HTML I tried which none worked.
<body background="<?php echo $backGround; ?>">
<body background="<?php echo htmlspecialchars($backGround); ?>">
I found these from preview stack overflow questions but they were about setting PHP variables to image sources. I would have thought it would apply to this as well.
Here's my entire PHP page using some of the suggestions but yet to still work.
<?php
$backGround = "images/backgrounds/grey.png";
?>
<html>
<head>
<title>Exodus</title>
<link rel=StyleSheet href="styles/main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<!-- JS Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/fader.js"></script>
</head>
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<div class="pre-wrap">
<div id="container">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
</div>
<div class="wrap">
<p>Test</p>
</div>
</div>
</body>
First of all - using backgound attribute is not recommended by W3C.
What you really need is inline style:
<body style="background-image: url('<?php echo $backGround; ?>')">
check this it will work
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<body style= 'background-image: url("<?php echo htmlspecialchars($backGround); ?>")'>
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6
Firstly, I apologise if this is a really simple question to those with more experience, but I'm a little to new to this so I hope someone may be able to help me please.
I'm trying to implement a jQuery Modal Confirmation box upon a button click. This shown in the script below:
<!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" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<script type="text/javascript">
var deleteTheSelectedUrl = '';
$(document).ready(function() {
// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false, // set this to false so we can manually open it
dialogClass: "jQueryDeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 460,
height: 260,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$( this ).dialog( "close" );
if('' != jQuery.trim(deleteTheSelectedUrl)) {
window.location = deleteTheSelectedUrl;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
jQuery('a.deleteConfirmation').click(function() {
deleteTheSelectedUrl = $(this).attr('href');
var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
name = jQuery.trim(name);
$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
$("#jQueryDeleteConfirmationModalWindow").dialog('open');
return false;
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<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">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="hidden" id="username" value="IRHM73" />
<input name="locationid" type="hidden" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/>
<?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');
//$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $galleryPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a><input type="radio" name="delete" /></li>
<p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
<b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The problem I'm having, is that when I click the 'Delete Selected Image' button, I receive this error:'jQueryDeleteConfirmationModalWindow' is undefined at line 92 which is this
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
I've rebuilt the page a few times, but I still get the same error, but I'm not sure why.
I just wondered whether someone could have a look at this please and let me know where I'm going wrong?
Thanks and regards
I don't see a div with the ID jQueryDeleteConfirmationModalWindow. Perhaps I am missing it? The jQuery Dialog is performed on an existing div.
http://jqueryui.com/demos/dialog/
<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div>
Your onlclick event handler should call a function name
<input type="button" onclick="showDialog()" ... />
then your JS will access it this way
function showDialog(){
$("#jQueryDeleteConfirmationModalWindow").dialog({...});
}
I wonder whether someone may be able to help me please.
I'm using Aurigma's 'Image Uploader' software to allow users to add, and view images for the records they create with the image data collected and retrieved via an XML file.
One of the pages I've put together creates a gallery which allows the user to view the images, both individually and as part of a 'fancybox' slideshow. The script for this is shown below.
<!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">
<?php
$galleryPath = 'UploadedFiles/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -475px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "imagefolders.php" /> View Uploaded Images In Folder Structure <a/> ← View All Uploaded Images </div>
<form id="gallery" class="page">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?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');
$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a> </li>
<li class="item"></li>
<p><span class="style4"><b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> <br />
<b>Image contained in folder:</b> <?php echo htmlentities($xmlFile->getAttribute('folder'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aB-a"> </div>
</div>
</div>
</div>
</form>
</body>
</html>
What I'd like to be able to do is now make the images that are retrieved, user specific, i.e. User A can only view their images.
If this information was being retrieved straight from a mySQL database I know that within PHP I can use the 'SELECT WHERE' statement to filter the returned records, but could someone tell me please is there an XML equivalent that I could use?
Many thanks
Allowing users to view only their own uploaded images is not such a simple task. If the images are stored in a publically accessable folder then anybody can view the images using their browser.
To achieve this there are a few alternatives such as:
storing the images in the database rather than the filesystem,
creating a new foler for each user on the filesystem and changing
the read write permissions for each folder, or
storing the images outside the web root and fetching the images
using php i.e.
Instead of providing a link to an image. Provide a link to a cgi
script which will automatically provide the proper header and
content of the image.
For example: image.php?sample.jpg
You can then make sure they are already authenticated (e.g. pass a
session id) as part of the link.
This would be part of the header, and then your image data can
follow.
<?php
$file = basename(urldecode($_GET['file']));
$fileDir = '/path/to/files/';
if (file_exists($fileDir . $file))
{
//perform some authorisation check
...
...
// Note: You should probably do some more checks
// on the filetype, size, etc.
$contents = file_get_contents($fileDir . $file);
// Note: You should probably implement some kind
// of check on filetype
header('Content-type: image/jpeg');
echo $contents;
}
?>
I think this is an encoding problem(?), but not really sure.
When I view my generated source (in both FF and IE) I see funky paths from my js and css files like: <script type="text/javascript" src="http://www.domain.com/wp-content/themes/dudical/js/ce.f4195499d3cfc40ae09588aae02ff2dc.jquery,oeasing,omin,l.js"></script>
Also, several of the js/css files are actually being transcluded, i.e I don't see references to the external files, but instead the content of those files are being shown in the source inside of <script> and <style> tags respectively. I've never seen this type of behavior before and am pretty baffled.
Here is how my header.php file begins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_front_page() ) {
bloginfo('name');
} elseif ( is_category() ) {
single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
single_post_title();
} elseif (is_page() ) {
single_post_title(); echo ' - '; bloginfo('name');
} else {
wp_title('',true);
} ?>
</title>
<?php if(get_option('favicon')) { ?>
<link rel="shortcut icon" href="<?php echo get_option('favicon'); ?>" type="image/x-icon" />
<?php }else{?><link rel="shortcut icon" href="<?php echo system32_url; ?>/favicon.ico" type="image/x-icon" /> <?php } ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<!-- Jquery and Easing-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.capSlide.js"></script>
Here is what I see output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en lang=en>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1"/>
<title>Surf Hatteras</title>
<link rel="shortcut icon" href="http://www.surfhatteras.com/wp-content/uploads/2010/10/surf-icon.gif" type="image/x-icon"/>
<style>body { outline:none;}
.postoptions { padding:0px; padding-top:0; }
.postoptions select,
...
</style>
<style>/* CSS for WP-Testimonials */
#sfstest-form label {
float: left;
width: 200px;
font-weight: bold;
}
...
</style>
<script type='text/javascript' src='http://www.surfhatteras.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<link rel=EditURI type="application/rsd+xml" title=RSD href="http://www.surfhatteras.com/xmlrpc.php?rsd"/>
<link rel=wlwmanifest type="application/wlwmanifest+xml" href="http://www.surfhatteras.com/wp-includes/wlwmanifest.xml"/>
<link rel=index title='Surf Hatteras' href='http://www.surfhatteras.com/'/>
<meta name=generator content="WordPress 3.0.1"/>
<style>/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
...
</style>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/ce.51cd742ab6418eec6131ff2cf43b61c4.style,s.css"/>
<!-- Jquery and Easing-->
<script type="text/javascript" src="http://www.surfhatteras.com/wp-content/themes/dudical/js/ce.9e936b27d8d0e4e07ebef242d7c6e2cc.jquery-1,o4,omin,l.js"></script>
<script type="text/javascript">(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
...
})(jQuery);</script>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/colors/ce.d47db6d7bbcb1f0192576f60ffa27ec9.white,s.css" media=screen />
<!-- Slider CSS-->
<style>/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
#coin-slider { margin-left:20px;}
...
</style>
<link rel=stylesheet type="text/css" media=screen href="http://www.surfhatteras.com/wp-content/themes/dudical/css/cc.224c1b363a793961fc7bc2e428d6ce58.nivo-slider,s+superfish,s.css">
Can't figure what is happening to my paths, or why some external files are getting treated as such...
EDIT
List of plug-ins I am using:
Category Posts Widget
Contact Form 7
Contact Form 7 to DB Extension
Get Post Image
Get The Image
Resize At Upload Plus
Widgets Reloaded
WordPress Hashcash
WP-DBManager
WP-Mail-SMTP
WP Show IDs
WP Wunderground
(The caching plugin I was using is Quick Cache)
Contents of my functions.php file
It's not a big deal.
Just because you have using Goolge Page Speed extension mod.