I'm facing a problem with a slider that I'm using on a website.
(www.cloosedesign.com)
The website is a portfolio I made for a friend. So there are severals works to show.
Each work is listed as a link, and when you click on the link it shows you the corresponding picture with the slider. (I've put some PHP to get the right pictures from the database Mysql).
It works fine, except on SAFARI. Indeed sometimes when I click on a link the text of the footer (white text on the black box) desappear and re-appear, like if the page was refreshing.
This pb appear sometimes after the 3rd click, or sometimes after more clicks.
here is my code :
in the <head> :
I'm calling jquery :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
And I'm calling the javascript file for the slider :
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
then in the portfolio_english page I'm checking the images corresponding to the work selected (= $contenu):
<?
$images_sql = "SELECT * FROM `a_fichier`
WHERE id_fiche=".$contenu."
ORDER BY tri";
$images = mysql_query($images_sql);
echo'<div id="slides">';
echo '<div class="slides_container">';
while ($image=mysql_fetch_array($images))
{
echo "<img src='Images/PorteDoc2/".$image['nom']."' width='540' height='600' alt='".$image['titre']."' />";
}
echo '</div>';
echo '</div>'; ?>
And just after the php code I write the following javascript :
<script type="text/javascript">
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
</script>
And then I call the footer.php file.
Thanks
This http://jsfiddle.net/NNSqw/ is the code that does what I mean, it uses jquery and ajax, now, to explain the html bit is pretty straight forward the div with the id="content" will be where your content will get loaded into.
Now to the JS/JQuery, everytime a user presses a link the content of the div with the id="content" gets changed, you will have to make a page named get_images.php and make it use the php code $_GET['realisation']; to get the number of the link clicked and from there it will work like your current page :).
Sorry I'm not brilliant at explaining but, if you wish me to try and clarify it more just say :)
Edit:
Right in your portfolio_english.php file the following code should exists (I'm using the english version of your site):
<span class="link" onClick="javascript: show_image('1')">Entreprise internationale 1</span><br>
<span class="link" onClick="javascript: show_image('2')">Entreprise internationale 2</span><br>
<span class="link" onClick="javascript: show_image('3')">Entreprise internationale 3</span><br>
<span class="link" onClick="javascript: show_image('4')">Entreprise internationale 4</span>
You should have your links that the side, which have an onClick event leading them to the javascript function which should be in the head of the page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
show_image(no){
$.ajax({
url: 'get_images.php?realisation='+no,
success: function(data) {
$('#content').html(data);
}
});
}
</script>
[... rest of header ...]
</head>
Also in that file you should have the div where the images currently appear
<div id="content">
</div>
get_image.php
In your get_image.php you need to have what you currently use to get your images, so to get the number e.g. 41 into the php code you are using use:
<?php
$number = $_GET['realisation'];
[... Rest of php code to retrieve images ...]
?>
Also, if you still don't understand where I'm going try reading the jquery documentation to see if you understand it more then: http://api.jquery.com/jQuery.ajax/
OK, before any real investigation let's get a few things out of the way.
Update jQuery to the newest version (http://jquery.com/), then you don't need the easing plugin as it's built in nowadays.
Rather than bind to window.onload, use the proper syntax for using jQuery:
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
If that isn't any good, make a really small test page that only has the code you are using with the slider, and check if it's still a problem.
To be honest, I don't really know why people use these massive slider plugins, making a slider is an easy little job that requires less than 10 lines of jQuery.
Related
I'm going to be totally honest. I have zero experience in wordpress php coding but I can do simple adjustments using the wordpress admin. Now I'm facing a problem. I used the feather lightbox js. I have a code below which shows the part of the footer.
<?php if ( is_front_page() ) : ?>
<script>
jQuery(document).ready(function() {
$.featherlight("#mylightbox");
//console.log("hi");
});
</script>
<?php endif; ?>
<?php wp_footer(); ?>
Open element in lightbox
<div id="mylightbox">This div will be opened in a lightbox</div>
</body>
With this the featherlightbo pops up when i clicked the anchor tag. But what i want to do is to have the feather lightbox to open it on page load. As you can see in my code there's a part there says if front_page which has also ready function. It returns an error
Uncaught TypeError: Cannot read property 'featherlight' of undefined
Please I need your help anyone.
Thanks.
<div id="mylightbox">Text to display in box</div>
For this popup use the script
$.featherlight($('#mylightbox'), {});
This will work
It seems like jQuery isn't defined using the $-sign, since jQuery.(document) works.
Change $.featherlight to jQuery.featherlight and it should work.
As you asked in your comment, you can initially hide the div by adding the css property: display: none on that div.
I'm trying to do some stuff with jquery/js (I don't know which one it is..), for example this script ; http://pastebin.com/V3HpU0NY - > http://blog.mainstreethost.com/light-youtube-embeds-faster-page-load#.VG9HKamkVSJ
But now comes the difficult part.
Url: http://erwin.my89.nl/stage/sieh/
This is the website when you go to the url.
This loads the "gallery (top)" and all content/ and kinda images(lazyload) for all the 'gallery' posts. If this has to be done another way please say so.
When you click a image you'll get this:
I hope you understand the idea.
So everything working ok
but now i go in to the inspector and i encounter this?!
I assume it is because i have the script defined in the loop of the content.. so when i click a gallery image, it loads another bunch of those text/css's.
So my question is: Is this the right way to do it? or should i be doing this different?
while ($loop->have_posts()) : $loop->the_post($post->ID);
if ($metas) {
foreach ($metas as $metakey) {
} elseif ($metakey['url']) {
preg_match(
'/[\\?\\&]v=([^\\?\\&]+)/',
$metakey['url'],
$matches
);
$id = $matches[1];
?>
<div class="youtube" id="<?php echo $id ?>" style="width: 560px; height: 315px;"></div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/youtube.js"></script>
<?php
^part of the code, if need more please say so.
Thanks in advance!
Can you put your CSS file/s in the head? That's where it normally goes.
Also, I don't see anywhere in your PHP where it could be loading these <style></style> tags. However it does look like it's going to import the same script at the end of each loop.
Could you provide more information on what your exact problem is?
So, let's say I have only one file on my server called index.php :
<!DOCTYPE html>
<html>
<body style="background-color: orange;">
<!-- On/Off button's picture -->
<?php
echo ("<img id='button' src='data/button.jpg' alt='off'/>");
?>
</body>
</html>
Now, let's say I attach a JavaScript that changes the buttons ALT to ON when I click the button at some point.
How can I read the DOM elements on this page using PHP?
So far, I've found this code:
$dom = new DOMDocument;
$dom->loadHTML($html);
$main = $dom->getElementById('alt');
but I can't figure out how I would fit that in my code above, what page should I call loadHTML() for?
How do I make PHP read DOM elements it generated using echo?
First of all, your button has id button, so searching for the id alt would return no results.
Second: The piece of php you found reads a page $html (probably file_get_contents('some_url'), puts it in the variable dom and parses it, searching for the id alt. In your case it would read your own page, breaking it down in pieces looking for that button.
Thats of no use if you can read the status with javascript on your own page. You can then pass it to php trough an ajax-call or by adding it to the url like mypage.php?button=off
$main = $dom->getElementById('button');
I am adding vk.com like buttons for category archive page. The like button loads fine, and works fine. But the problem is, the page takes more time to load same js files as many times the number of posts I have!
Here is my code :
in my header.php :
<script type="text/javascript">
VK.init({apiId: xxxxxxx, onlyWidgets: true});
</script>
in my wordpress loop in category.php :
<div id="vk_like<?php echo $incre; ?>"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like<?php echo $incre; ?>", {type: "mini", pageUrl: "<?php echo get_permalink($value['id']); ?>"});
</script>
Here, the $incre is my index variable, and get_permalink returns the unique page url for the like box.
The problem is, this code loads the following js multiple times.
http://vk.com/js/al/lite.js?76
http://vk.com/js/lang3_0.js?3349
and lots more.
Please help.
Socialite.js is your friend. It allows to load social buttons on demand (hover, viewpoint). Vkontakte "like" button is supported but not enabled by default.
I am using the XFBML version of the Like button because I need the Send button.
Here is the code I use:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=178223665570391345&xfbml=1"></script>
<fb:like href="<?php echo current_url(); ?>" send="true" layout="button_count" width="150" show_faces="false" font="trebuchet ms"></fb:like>
I use so that it will Like the page it shows up on.
The Send button works fine but the Like button does't work. I've tried liking it a few times, I get this in the JS response:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":false,"error_info":null}}
You can see the page here: http://www.salemarked.com/share/152/
The Send button doesn't work either and here is the error it gives me - http://d.pr/VPO1
Thanks for your help!
I got it to work now. Removed current_url() since by default, href is going to be the current page if left blank.