|
PHP - Problem With Slick Carousel Autoplay
Hello,
I'm creating a website that takes flickr photos from areas that you click on the map and loads them into a jquery carousel called Slick Carousel. Everything works fine except for I have this strange issue where the autoplay only begins if you click to another window or you manually move the thumbnails to the left or right. Then it works fine. Can anyone look at the code and see if they can see what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<!-- google maps api key -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAM4sSbWxrbwyXvGHvbH6piG5AlqLjtAMc&sensor=true" type="text/javascript"></script>
<!-- jquery -->
<script src="js/jquery.1.11.1.min.js"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<!-- scripts for lightbox -->
<script src="js/lightbox.min.js"></script>
<!-- script for actual display of images -->
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Time Capsule <i class="fa fa-space-shuttle"></i> </h1>
<div id="drop_instructions">
<p>Ever wonder what a certain area looked like from the world's point of view? Now you can find out! Click on an area in the map and we'll show you that spot as the locals see it.</p>
</div>
</header>
<section class="clearfix">
<div id="map_canvas"></div>
<div id="imagebox" class="slider-for">
</div>
</section>
<div class="slider-nav">
</div>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/map.js"></script>
</body>
</html>
$(document).ready(function() {
$('#drop_instructions').hide();
$('#header').click(function(){
$('#drop_instructions').fadeToggle( "fast", "linear" );
});
//define lat and long globally so they can be used elsewhere
var lat=0;
var lng=0;
var city='';
var state='';
var StartLatLng = new google.maps.LatLng(28.4158, -81.2989);
$('#map_canvas').gmap({
'center': StartLatLng,
zoom: 10,
styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
})
.bind('init', function(event, map) {
$(map).click( function(event) {
//define date
var year = $("#year").val();
var month = $("#month").val();
var day = $("#day").val();
//give current value to lat/long on click
lat=event.latLng.lat();
lng=event.latLng.lng();
var latlng= event.latLng;
//input box with coordinates
$('#latlng').val(lat+', '+lng);
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Check result 0
var result = results[0];
//look for locality tag and administrative_area_level_1
for(var i=0, len=result.address_components.length; i<len; i++) {
var ac = result.address_components[i];
if(ac.types.indexOf("locality") >= 0) city = ac.long_name;
if(ac.types.indexOf("administrative_area_level_1") >= 0) state = ac.long_name;
}
//only report if we got Good Stuff
if(city != '' && state != '' && year != '') {
console.log("Hello to you are in "+city+", "+state+"! The date you chose is: " + month + " " + day + ", " + year);
} else {
console.log("YOU FORGOT TO PICK A YEAR!");
}
} //end of getting city
//==============Image generation=================
//get location from map click and inject data into URL
var locationURL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a0f6800f62ea920f00472805d767ac5c&lat="+lat+"&lon="+lng+"&format=json&nojsoncallback=1";
$.ajax({
url: locationURL,
dataType: "json",
success:function(data){
var farmId;
var serverId;
var photoId;
var secret;
var title;
//hide instructions once content is generated
$('#instructions').fadeOut(500);
//title the images for the city clicked on
$('#images_title').append('<h3>'+city+' , '+state+'</h3>');
console.log(data);
//generate thumbnails user can click on
for (i=0; i < 20; i++){
farmId = data.photos.photo[i].farm;
serverId = data.photos.photo[i].server;
photoId = data.photos.photo[i].id;
secret = data.photos.photo[i].secret;
title = data.photos.photo[i].title;
// make the urls for the DOM
photoURL = "https://farm"+farmId+".staticflickr.com/"+serverId+"/"+photoId+"_"+secret+"_z.jpg";
thumbURL = "https://farm"+farmId+".staticflickr.com/"+serverId+"/"+photoId+"_"+secret+"_s.jpg";
//append the clickable thumbnails to the dom
$('.slider-for').slickAdd('<div><img src="'+photoURL+'" alt="'+title+'" /></div>');
$('.slider-nav').slickAdd('<div><img src="'+thumbURL+'" class="image_thumb" alt="'+title+'" /></a></div>');
}
//change background of page to an image that is displayed
$("body").css("background-image", "url('"+photoURL+"')");
}
});
});
});
});
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
arrows: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000
});
Similar TutorialsThis topic has been moved to Other. http://www.phpfreaks.com/forums/index.php?topic=348135.0 Hi, i have the following code: where i want the sound to only play during the false part of the IF statement but currently it always plays on every reload, and even if the IF = true any ideas? ive tried autoplay="0" also
Thanks
<embed src="beep.wav" autostart="false" width="0" height="0" id="sound1" enablejavascript="true"> +
<script>
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
sound.Play();
}
</script>
+
if( isset( $json['Data'] ) ){
echo "<b>Success</b>";
echo "</br>";
echo $data.' x ' .$tqty;
echo "</br>";
} else {
echo "Error";
echo "</br>";
echo $json['Message'];
echo '<script> PlaySound("Sound1"); </script>';
}
Hello,
I have problem with JS slider. Here is demo website http://goo.gl/bPzpAo I can't make the slider to have similar size items (seems cutted). I can't get, what's wrong there? Someone could help me with this?? I tried to resize images, also li elements modifications, but no solution. If someone could help me, will be much appreciated!
Regards,
Zox
Hi all This is my first post but I hope someone can help. I am building a website using a theme that uses a template builder that includes a client scrolling carousel. When using it once it works fine... I need to use it 3 times. The second and third instance doesn't scroll and appears huge on the page. I am a novice at php but after a bit of research I believe its something to do with how the builder calls for the carousel and the ID. I am not sure how to amend the php to make each instance of the carousel have a different ID and consequently js and css div classes are called correctly. I hope this make sense and any help would be much appreciated Craig I have an image carousel where the hyperlink worked just fine in all browsers that I tested UNTIL recently, now it works on IE and Opera; it no longer seems to work on Firefox, Safari and Chrome. Can someone give me an idea as to why that would happen? Here's the webpage: http://www.myalaskacenter.com and here's the coding used: Code: [Select] <?php echo '<div id="slider"><ul id="sliderContent">'; while ($Row = mysqli_fetch_assoc($Result)){ $EventName = $Row['EventTitle']; $url = $Row['ShoWareEventLink']; $image = $Row['eImage']; $description = $Row['BriefDescription']; $promoter = $Row['Presenter']; $starting = $Row['startDATE']; $ending = $Row['endDATE']; echo '<li class="sliderImage"><a href="' . $url . '"><img src="https://alaskapac.centertix.net/UPLImage/' . $image . '" alt="' . $EventName. '" title="' . $EventName . '" height="400" width="900" border="0" /></a><span class="right"><strong>' . $EventName . '</strong><br /><em><br />Presented by ' . $promoter . '</em><br />' . date("l, F j, Y", strtotime($starting)); if ($starting != $ending){ /**IF STARTING=ENDING =>NO ENDING SHOWN **/ echo '<br />to ' . date("l, F j, Y", strtotime($ending)); } echo '<br /><br />' . $description . '<br /><br /><a href="' . $url . '"><img src="https://alaskapac.centertix.net/UPLImage/z_BUY_Tickets_gold.gif" height="40" width="100" border="0" align="right" alt="' . $EventName . '" title="' . $EventName . '" /></a></span></li>'; } echo '<div class="clear sliderImage"></div></ul></div>'; ?>When I click to view the source in the non-working browsers, I cannot find an issue all the HTML looks like it should work. In fact there are two other "image carousels" on that page that do indeed work in these non-working browsers. Hi all new to php and this forum i have been looking around and im very impressed most questions get answered not like on some of the forums around.
Is there any one kind enough to help me out i have an api call via php and would like to output the results to owlcarousel where do i start with this.
Code i have is:
<?php
error_reporting(E_ALL); // Turn on all errors, warnings and notices for easier debugging
// API request variables
$endpoint = 'http://svcs.ebay.com/services/search/FindingService/v1'; // URL to call
$version = '1.0.0'; // API version supported by your application
$appid = 'YourAppID'; // Replace with your own AppID
$globalid = 'EBAY-GB'; // Global ID of the eBay site you want to search (e.g., EBAY-DE)
$query = 'tools'; // You may want to supply your own query
$safequery = urlencode($query); // Make the query URL-friendly
// Construct the findItemsByKeywords HTTP GET call
$apicall = "$endpoint?";
$apicall .= "OPERATION-NAME=findItemsIneBayStores";
$apicall .= "&SERVICE-VERSION=$version";
$apicall .= "&SECURITY-APPNAME=$appid";
$apicall .= "&GLOBAL-ID=$globalid";
$apicall .= "&keywords=$safequery";
$apicall .= "&storeName=yourstorename";
$apicall .= "&paginationInput.entriesPerPage=6";
$apicall .= "&paginationInput.pageNumber=1";
// Load the call and capture the document returned by eBay API
$resp = simplexml_load_file($apicall);
// Check to see if the request was successful, else print an error
if ($resp->ack == "Success") {
$results = '';
// If the response was loaded, parse it and build links
foreach ($resp->searchResult->item as $item) {
$pic = $item->galleryURL;
$link = $item->viewItemURL;
$title = $item->title;
$price = $item->currentPrice;
// For each SearchResultItem node, build a link and append it to $results
$results .= "<div id='item'><div class='img-wrap' align='center'><img src=\"$pic\" class='itemimg'></div> <div class='itemtxt' align='center'><a href=\"$link\">$title</a>$price</div></div>";
}
}
// If the response does not indicate 'Success,' print an error
else {
$results = "<h3>Oops! The request was not successful. Make sure you are using a valid ";
$results .= "AppID for the Production environment.</h3>";
}
?>
<html>
<head>
<body>
<table>
<tr>
<td>
<div id="result">
<?php echo $results;?>
</div>
</td>
</tr>
</table>
</body>
</html>
Im sure is pretty basic but being new to this i have no idea where to start,
any advice would be much appreciated.
thanks
Edited by didz666, 25 January 2015 - 02:22 PM. I have installed the Carousel code using tutorial at http://www.wolf-howl.com/blogs/how-to-carousel/ now i amfacing a problem that every thing is working expect images thumbnail. here is the site http://www.digpk.com/ where i am try to make carousel. you can see the featured posts at top with missing thumbnails. Thanks in advance. picture of the problem is also attached. I've been working on developing a CMS blog and now I'm trying to create a slideshow wit Bootstrap Carousel on the homepage to present the dynamic content (images + text) using the data from table 'posts'. I tested this code, and it only presents one post. I mean, It's not possible to go to the next slide. I want to show all the posts on the slides. *The DB connection is already on the includes. The connection was written on a small file called DB.php Home.php
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<?php
// The default SQL query
$sql = "SELECT * FROM posts ORDER BY id desc";
$stmt = $ConnectingDB->query($sql);
while ($DataRows = $stmt->fetch()) {
$Id = $DataRows["id"];
$PostTitle = $DataRows["title"];
$Image = $DataRows["image"];
$PostText = $DataRows["post"];
?>
<!-- Slide -->
<div class="carousel-item active" style="background-image: url('uploads/<?php echo $Image; ?>')">
<div class="carousel-caption">
<div class="card-body black">
<h3 class="large-mistral-white"><?php echo $PostTitle; ?></h3>
<p class="small-times-white"><?php echo $PostText; ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
DB.php <?php $DSN='mysql:host = localhost; dbname=everybody_blog'; $ConnectingDB = new PDO($DSN,'root',''); ?>
i have 8 division (div), i want to display 4 rows in 4 division and the remain 4 rows in the next 4 division here is my code structure for carousel
<div class="nyie-outer"> second row third row
fourth row fifth row sixth row seven throw eighth row
</div><!--/.second four rows here-->
sql code
CREATE TABLE product( php code
<?php how can i echo that result in those rows
Guys thanks for helping me solve the problem i had but now i have another problem and i am lost. i have included the code below for you to have overview.
This is the code:
<table style="width:100%; margin-left:auto; margin-right:auto"> I do not receive email for my published php file which is: <?php ///// easend.php ///// $youremail = "acdelco40108@yahoo.com"; /*put the email address here, between quotes, the email address you want the message sent to*/ $to = $youremail; $email = $_POST['EMail']; $name2 = $_POST['Name']; $street2 = $_POST['Street']; $city2 = $_POST['City']; $state2 = $_POST['State']; $zip2 = $_POST['Zip']; $Phone = $_POST['Home_Phone']; $Cell = $_POST['Cell_Phone']; $education = $_POST['email1']; $comments = $_POST['email2'] ; $headers = "From:" . $email; $fields = array(); $fields{"Name"} = "Name"; $fields{"Street"} = "Street"; $fields{"City"} = "City"; $fields{"State"} = "State"; $fields{"Zip"} = "Zip"; $fields{"Home_Phone"} = "Home Phone"; $fields{"Cell_Phone"} = "Cell Phone"; $fields{"EMail"} = "Email"; $fields{"email1"} = "Education"; $fields{"email2"} = "Comments"; $subject = "We have received the following information from your employment application"; $body = "We have received the following information from your employment application:\n\n"; foreach($fields as $a => $b) { $body .= sprintf("%20s: %s\n",$b,$_POST[$a]); } mail ($to, $subject, $body, $headers); //send mail to owner #end create email vars $headers = "From:" . $to; mail ($email, $subject, $body, $headers); //send mail to user #end create email vars echo "<head><META HTTP-EQUIV=\"Refresh\" CONTENT=\"2; URL=ThankYou.html\"></head>"; ?> I have having a problem getting a mysql query to work. If I just use mysql_query it looks like this and works fine: INSERT INTO schedule (schedule_pk, schedule_month, schedule_day, schedule_year, schedule_hour, schedule_minute, schedule_type, employeenumber) VALUES ( NULL, 10, 10, 1999, 12, 6, 'DayIn', 3); If I put it through mysql_real_escape_string it turns it to this and does not work when I put it into mysql_query: INSERT INTO schedule (schedule_pk, schedule_month, schedule_day, schedule_year, schedule_hour, schedule_minute, schedule_type, employeenumber) VALUES ( NULL, 10, 10, 1999, 12, 6, \'DayIn\', 3); aka: $query = "INSERT INTO...." mysql_query($query); that works, but: $query = "INSERT INTO...." $sqlQuery = mysql_real_escape_string($query, $con); mysql_query($sqlQuery); results in the error. mysql_query($query); The error is: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '\'DayIn\', 3)' at line 1 Hows it going guys. I am currently having a problem. I had a program that worked. I migrated the website and now the program is broken. Any time i try to run it, i get this error: Quote Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/thegoo20/public_html/class/wordgame/wordgame.php on line 31 Here is the code at that point: Code: [Select] function changeword(){ $result = mysql_query("Select words from CurrentWords"); $totalwords = array(); while ($row = mysql_fetch_array($result)){ $totalwords[] = $row["words"]; } $_SESSION['word'] = $totalwords[rand(0, count($totalwords)-1)]; $_SESSION['scrambled'] = str_shuffle($_SESSION['word']); } where line 31 is the while statement. Any help would be appreciated. Thanks I am trying to understand PHP OOP and I have some code that is not working. here is the error code. Code: [Select] Parse error: parse error, expecting `T_FUNCTION' in C:\wamp\www\testing\armor_lib.php on line 11 And here is the armor_lib.php file: <?php class armor { // Head public $head; public $torso; public $pants; public $gloves; public $boots; // new stuff here class head extends armor { function __construct($head){ $this->set_head($head); } } // Torso class torso extends armor { function __construct($torso){ $this->set_torso($torso); } } // Pants class pants extends armor { function __construct($pants){ $this->set_pants($pants); } } // Gloves class gloves extends armor { function __construct($gloves){ $this->set_gloves($gloves); } } // Boots class boots extends armor { function __construct($boots){ $this->set_boots($boots); } } } ?> And here is the php in the armor.php file I have: <?php $head = new armor("Leather Helm"); $torso = new armor("Leather Shirt"); $pants = new armor("Leather Pants"); $gloves = new armor("Chain Mail Gloves"); $boots = new armor("Leather Boots"); echo "You are wearing: " . $head->get_head() . "on your Head"; echo "<br />"; echo "You are wearing: " . $torso->get_torso() . "on your Torso"; echo "<br />"; echo "You are wearing: " . $pants->get_pants() . "on your Legs"; echo "<br />"; echo "You are wearing: " . $gloves->get_gloves() . "on your Hands"; echo "<br />"; echo "You are wearing: " . $boots->get_boots() . "on your Feet"; ?> Any Help in understanding this will be much appreciated. Thanks. I am trying to save this an an xml document but am getting this error when I try to open the xml file "feed.xml" - "XML Parsing Error: no element found" $xml = '<rss version="2.0"> <channel> <title> RSS Feed</title> <link></link> <description>the best industry-lead opinions</description> <language>en-us</language> </channel> </rss>"; $xml2 = new DOMDocument('1.0'); $xml2->Load($xml); $xml2->save("feed.xml"); Hi Guys, I am having an issue with an if statement, I cant get it to go true, even though it clearly is! Please excuse the messy code, im pulling my hair out here! $itemprice[0] = 8.99; $itemprice[1] = 19.95; $itemprice[2] = 8.99; print_r($itemprice); echo "<BR>"; $x=0; foreach($itemprice AS $val) { echo gettype($val) .$val. "<br>"; if($val == 8.99) { $x++; $freecount++; } } echo $x; outputs correctly: Array ( => 8.99 [1] => 19.95 [2] => 8.99 ) double8.99 double19.95 double8.99 x = 2 replacing: $newtotal = add_to_price($id, $non_disc); $itemprice[] = $newtotal - $non_disc; print_r($itemprice); echo "<BR>"; $x=0; foreach($itemprice AS $val) { echo gettype($val) .$val. "<br>"; if($val == 8.99) { $x++; $freecount++; } } echo $x; The add to price function returns a running total, the take away gives me the current item price in a for loop to build the array. Output: Array ( => 8.99 [1] => 19.95 [2] => 8.99 ) double8.99 double19.95 double8.99 x = 1 The problem? Well when I build the array up automatically it still prints the same, has the same datatype, yet the if statement does not catch the second 8.99 value? Please accept my apologies for this post, it is my first ever and i've been doing this for 10 years now, i have never been this stumped on something so simple, I can only think it is a datatype error but i have tried apostrophes in the if, make no difference. All help massively gratefully received. Please email me if you want to see it in action... Okey so i made a table that you put your name,author,and message when you submit it , it echoes a table with the name,author and message written (and it also echoes a delete buttom,so delete this post oif necessary) im new to php and i have been with this problem for a couple of weeks so i guess its time to ask for some help the problem is that i dunnot know how to make my delete buttom work! i tried if statement but it dosent work i also tried ternary operation and dint work :S i read that there is something like $post[ID](and this is supposed to get the ID of the post submmited, and delete it) im not sure, im so confused! help! XD this is the code <?php $tittle=$_POST['tittle']; $author=$_POST['author']; $message=$_POST['message']; if ($_POST['submitnews']){ $currentdate= date("y-m-d"); $currenttime=date("H:i:s",strtotime("-6 hours")); $post=mysql_query("INSERT INTO news VALUES('','$tittle','$author','$message','$currentdate','$currenttime')"); echo"Posted!"; } $select=mysql_query("SELECT * FROM news ORDER BY id DESC"); while ($row= mysql_fetch_assoc($select)) { $id=$row['id']; $tittle=$row['tittle']; $author=$row['author']; $message=$row['message']; $date=$row['date']; $time=$row['time']; if ($_SESSION['admin']) { echo " <table width='488px' id='news_table'> <tr> <td> </td> <td> <center><font size='5'>$tittle</font></center><br> </td> </tr> <tr> <td> </td> <td> $message </td> </tr> <tr> <td> </td> <td> <font size='1'>Posted By:<font color='green'>$author</font> on <font color='gray'>$date</font> at <font color='gray'>$time</font></font> <input name='delete' type='submit' value='delete'> <td> </td> </tr><br><br> </table>"; Hi all. When I typed symbol ' in my textarea , after I submit it and view for what I typed , it will automatically add a slash in front of the ' . Such as the message is "I'm fine" , then it will turn out as "I\'m fine". Can I know what is the problem ? and how can I solve it? Thanks for every reply . |
|||||||