I have a single page with multiple instances of Swipe.js running. They are loaded dynamically through the CMS so hard coding values isn't really possible.
I have followed the steps outlined in this other post:
Generate Swipe JS slider for each slider DIV
I can get everything working except the last part where they talk about dynamically loading the prev/next controls for each player.
I create multiple sliders with:
var swipes = []
$('.slider').each(function(i, obj) {
swipes[i] = new Swipe(obj);
});
Then in the template code that structures each slider I have the following:
<?php $counter = 1; ?>
<div id="swipes<?php echo $counter; ?>" class='slider swipe gallery'>
<div class='swipe-wrap'>
//Images go here
</div>
<div>
<button onclick='swipes<?php echo $counter; ?>.prev()'>prev</button>
<button onclick='swipes<?php echo $counter; ?>.next()'>next</button>
</div>
<?php $counter++; ?>
</div>
The PHP counter does it's job perfectly, but for some reason when I click on a prev/next button I get the follow Console error:
Uncaught TypeError: Object # has no method 'next'
Thanks in advance!
Related
Okay I have index.php in which i used and its working fine all over the page except a form wizard form that load on a button click.
is working on entire page text (wherever i have used this) except a wizard form which loads on a button click. All the files of that wizard form are located website folders (e.g. wizard.php, wizard.js & wizard.css).
here's how wizard.php code starts:
<div class="wizard-container">
<div class="card wizard-card" data-color="green" id="wizardProfile">
<form action="">
<div class="wizard-header">
<h3 class="wizard-title">
GENERATE A FRESH <?php echo $_GET['name']; ?> CODE
</h3>
<h5 style="margin-left: 10px; margin-right: 10px;">Our interactive generator will guide your through the process</h5>
</div>
i want that should also work in wizard form but it shows
C:\xampp\htdocs\NameGenerator\content\hbox\html\wizard.php on line 7
EDIT first line: i used <?php echo $_GET['name']; ?> and its working...
Second Paragraph's First Line: <?php echo $_GET['name']; ?> is working on entire page...
i want that <?php echo $_GET['name']; ?> should also work in wizard form but it shows
So I didn't found what I was looking for in last two days.
To be clear I have a table "tracks" in my database.
So I can show from "tracks" the "demo" field wich is an audio file "url"..
<?= $tracks['demo']; ?>
I have multiple url's but then I need to replace the a href
<a href="<?php echo $tracks['demo'];?>"
in a logical way.
In simple terms it's like I want to click on button 1 that loads
url 1 into this a href with the ID, title field from that track.
When you press button 2 you need to load another url and replace url 1 with url2.
I tried many ways including javascript but it won't work.
Problem now is that when I list 4 items it always loads the latest "URL" i have posted in my source code. :)
When I echo out <?php echo $tracks['demo]; ?> on all items I can see the correct url's so the functionality to replace the url is my issue.
* I basically want to load many mp3 url's in a player I made in the footer of my website. It works by hardcoding the urls in the url field but this is not what it should be... *
Code:
<?php while($tracks = mysqli_fetch_assoc($muziek)) : ?>
<div class="col-md-2 viny" id="muziek">
<h4><?= $tracks['title']; ?></h4>
<img src="<?= $tracks['img']; ?>"
alt=" <?= $tracks['title']; ?> />
<p class="artist">Artist: <?= $tracks['artist']; ?></p>
</div>
<?= $tracks['demo'] = $audiourl ; ?>
<button type="button" onclick="play">Play</button>
</div>
<?php endwhile; ?>
*THIS LOOPS PERFECT FOR ALL ITEMS TRACKS ARE LISTED PERFECT *
In my player I have
<a href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
function play(){
I'm not good at JS... And this is my issue because it now loads the latest output from the php loop...
}
I don't know how you are replacing it but
Why not pass the audio in the function. Here like this
<button type="button" onclick="play(<?= $tracks['demo'] = $audiourl ; ?>)">Play</button>
assign a id to anchor tag
<a id="someId" href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
and in the play function, you receive it like this
function play(audioUrl){
}
and change the href like this in the play function
If you are using jquery
$('#someId').attr("href", audioUrl);
sometimes the above does not works. Can't remember why but if that does not works try this
$('#someId').href = audioUrl
If you are using javascript
document.getElementById('abcd').href = audioUrl
So I tried many things but I had many issues with the player it's js file using the same id's and so on.
The new logic I tried out seems to work:
<form action="" method="POST">
<input type="submit" value="Play" name="Play">
</form>
<?php
if (isset($_POST["Play"]))
{
echo $tracks['demo'];
}else{
echo ' ';
}
?>
There is more going on but I tried to write it down as simple as this to show the logic. All Track url's are hidden and when the page loads there is an empty $audiourl by default loaded in the a href from my audioplayer. By clicking the button play I show the url in the source but not on the site.
Then the latest $audiourl variable changes to this value.
Overview
I am developing a Wordpress based website that allows a visitor to upload images at a few different places on the page. I have (after a LOT of trial and error) got some working code but, as the code only differs slightly between each 'upload' area, I thought about trying to make it re-usable in the form of a 'plugin'.
My Background
I am a self-taught programmer so I am prone to lots of mistakes and doing things in completely illogical ways plus writing a thousand lines of code when one line would have sufficed.
History of the Problem (please skip this section to see the code below)
I thought I would include a bit of history so that I don't fall foul of the X-Y Problem. I have 4 places on the webpage that visitors can upload to the site. 3 of these are image uploads that should allow the visitor to also 'crop' the image. I'm using the jQuery plugins plupload and jcrop in order to provide the functionality.
Initially I attempted to write the code in a way that the page included relevant code in the DOM at execution time. In order to have multiple plupload instances on the same page I created one "dynamic variable" and then called the code like this...
var dynamicPartOfVar = "imageUploadAreaOne";
imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init);
This worked (of a fashion) but I found out that if the code is in the DOM then it isn't being cache'd by the browser. So I then went down the route of having a separate js file for each upload area and 'including' them and passing in the relevant variables with:
wp_localize_script("imageUploadAreaOne", "inputVar", $relevantVariableArray);
wp_enqueue_script("imageUploadAreaOne");
However, I quickly realised that if I could 'pass in' different variables to the same file I could make just one set of code and (for instance) pass a variable called "allowCropping" which would enable/disable jCrop etc.
Issue
I have code such as (just an example):
var isAdmin = inputVar.isAdmin;
var notAdmin = inputVar.notAdmin;
var thisUser = inputVar.thisUser;
var ajaxurl = inputVar.ajaxurl;
imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init);
imageManipulationObject["ProgressLoader"+dynamicPartOfVar] = $('#ProgressLoader'+dynamicPartOfVar).percentageLoader({width: 170, height: 170, progress:0.0});
/* **************************** */
// HIDE CROPPING DIV WHEN USER SELECTS A DIFFERENT IMAGE
/* **************************** */
$('.imageSelection').on('click', function() {
closeCropWindow();
});
$('.imageThumb').on('click', function() {
closeCropWindow();
});
HTML Example
<div id="mainCropDivID<?php echo $this->dynamicPartOfVar; ?>">
<div class="outerCropDiv">
<div id="innerCropDivID<?php echo $this->dynamicPartOfVar; ?>" class="innerCropDiv">
<img class="croppingImage" id="croppingImageID<?php echo $this->dynamicPartOfVar; ?>" alt="Cropping Image" src="<?php echo $currentURL; ?>"/>
<div class="JTcentreDiv">
<form id="cropimg<?php echo $this->dynamicPartOfVar; ?>" name="cropimg" method="post" action="<?php echo $getPartOfURL; ?>">
<input type="hidden" id="x_<?php echo $this->dynamicPartOfVar; ?>" name="x">
<input type="hidden" id="y_<?php echo $this->dynamicPartOfVar; ?>" name="y">
<input type="hidden" id="w_<?php echo $this->dynamicPartOfVar; ?>" name="w">
<input type="hidden" id="h_<?php echo $this->dynamicPartOfVar; ?>" name="h">
<input type="hidden" name="typeOfImage" value="<?php echo $this->typeOfImage; ?>">
<input type="hidden" id="imageIDtoCrop<?php echo $this->dynamicPartOfVar; ?>" name="imageIDtoCrop" value="">
<input id="performCropButton<?php echo $this->dynamicPartOfVar; ?>" type="submit" value="Crop Image">
</form>
</div>
</div><!-- #end #innerCropDivID -->
</div><!-- #end .outerCropDiv -->
<div style="clear:both;"> </div>
</div> <!-- #end #mainCropDivID -->
Assuming that wrapping this all up in a 'plugin' is the way to go. How would I go about doing that? I want to be able to pass in variables into the plugin including several DOM elements (i.e. I would like to pass to the plugin the div that holds the image that needs to be cropped, the div that holds the preview of the image, the div that holds the currently uploaded image etc). Plus other variables such as whether to allow 'cropping' or not.
Thank you for your help.
you will need to create a new JS file (that is going to be your plugin)
the piece of code necessary for this is
(function ($) {
$.fn.myFunctionPlugin= function (options) {
var defaults = {
};
var settings = $.extend(true, {}, defaults, options);
}
function dosomthing()
{
//CODE HERE
}
} (jQuery));
Add a reference to the plugin on your page(in the same way you add reference to jquery or any other third party js)
<script src="...Reference" type="text/javascript"></script>
add another script segment on the same page
<script type="text/javascript">
$(function() {
var options = {actionToPerform:"...",//This may be a controller action performed
idcalss="....." //Class of the item on the view you want to pass in}
$('.someclass').jsFunction(options);
});
PS: Please refer to the book JQuery in action second edition from page 205
Reference for a simple jquery plugin writing: jquery plugin example
I am trying to understand the process of implementing AJAX Query into my CodeIgniter application. The goal is to a have a clickable division (button) in a view. When this div is clicked the AJAX query is called and retrieves 5 movies from my DB and displays them in the view. Right now I have a main page with search button, this search button orders my DB by ID and then retrieves the 1st 5 movies from the DB and displays them on a new page. The function I am trying to implement should retrieve the next 5 movies and replace the 1st 5 movies without reloading the page.
Below is all the code I assume you should take a look at, due to its necessity. Under each part of the code a short summary is provided. And at the end I try to explain what I don't understand and what I am asking you to help with.
Main Page - Controller xampInstallFolder/htdocs/application/obs/controllers/main.php
public function generate_suggestions() {
$this->db->order_by("id","desc");
$pages = $this->db->query('SELECT * FROM movies LIMIT 5');
$data['pages'] = $pages;
$this->load->view('results_v', $data);
}
This function is called when my Search button on the main page is clicked. Right now it doesn't accept any criteria for the query it only retrieves the first 5 movies in the db. Then I take the movies and store them in the pages array and load the new view with the array provided in data
Results Page - View *xampInstallFolder/htdocs/application/obs/views/results_v*
<div id="listA">
<table>
<!-- Function that splits the array in $pages into the first 5 movie suggestions -->
<?php foreach ($pages->result() as $row): ?>
<a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>">
<div id="suggested" onmouseover="" style="cursor: pointer;">
<div id="info">
<p><b><?php echo $row->name ?></b></p>
</div>
<div class="details">
<p><?php echo $row->summary ?></p>
</div>
</div
</a>
<?php endforeach; ?>
</table>
</div>
<div id="next_btn" style="display: block;">
<p>Click here to display next 5 movies</p>
</div>
I have a div listA where I display the 5 movies using a for each loop on the pages array. I have much more div and information, but I was trying to keep it simple.
Javascript xampInstallFolder/htdocs/ASSETS/obs/js/myscripts.js
$( "#next_btn" ).click(function() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("listA").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getnext5.php?q="true);
xmlhttp.send();
});
In the head of my results view I link the javascript with this function. It triggers when the next_btndiv is clicked. I got the code from w3schools and from what I understood you need to provide the element in which the result is displayed (listA) and the file where the query is stored (getnext5.php)
getnext5.php Where do I put this file?
$con = mysqli_connect('localhost','root','root','obs2');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result))
{
<a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>">
<div id="suggested" onmouseover="" style="cursor: pointer;">
<div id="info">
<p><b><?php echo $row->name ?></b></p>
</div>
<div class="details">
<p><?php echo $row->summary ?></p>
</div>
</div
}
echo "</table>";
Here is the core function. I tried to adjust the code from w3schools, but I am not sure if it is correct. My DB is called obs2, but I am not sure if I should have it in both mysqli_connect and mysqli_select_db statements. I also know that I have to figure out how to make it always load the next 5 movies in the list, but right now I just force it on id>5. And then I have the style for the $result. I think the table and `while loop are coded properly, but I don't know how to turn the divs, anchors and original php echoes into the same syntax.
If you made this is far thank you very much for reading through. I'd say the only part I need help with is the getnext5.php. Mostly the syntax. And location, where should the getnext5.php file be stored? I don not think that the other parts of the code are wrong. But obviously if you spot anything in there please let me know as well. Again thanks for reading. I'm looking forward to your replies. If you'd need any other information just ask for it Ill add it.
I only read through the last script, and I corrected some mistakes you made. You can put that file anywhere pretty much. You can copy the code and paste it into a controller class or a views page.
<?php // I just decided to start here
mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5"; # This is an integer, no quotes necessary.
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result))
{
?> <!-- Note how we stop php right before we start printing html, since you have nested php tags throughout this block of markup -->
<a style="display:block" href="<?=base_url('core/detail/'.$row->id)?>">
<div id="suggested" onmouseover="" style="cursor: pointer;">
<div id="info">
<p><b><?=$row->name?></b></p>
</div>
<div class="details">
<p><?=$row->summary?></p> <!-- Protip, you may use <? and ?> instead of <?php and ?>. You may also use <?= as a shortcut to the "echo" function -->
</div>
</div>
<?php
} // We are opening up our PHP tags again
echo "</table>";
?>
It seems that you're kindof all over the place with your code. Instead of answering your question specifically, I'm going to give you some advice as to how you can use AJAX with codeigniter much easier. I'm not saying this is the best solution, but it's much more organized and clean that what you have going on. Hopefully it will point you on the right direction.
Let's start from the backend and then move towards the front.
First, a method in a controller which queries the movies in the database. Notice the parameters which allow us to ask for any subset of movies, and not just the first 5. (And yes, I'm only including the important lines of code instead of everything.)
public function generate_suggestions($start = 0, $count = 5) {
$pages = $this->db->query('SELECT * FROM movies LIMIT ' . $start . ',' . $count);
// send back the view as a simple HTML snippet (the <table>, perhaps?)
}
Now we need some Javascript that can call this function on the server. Since the function sends back an HTML snippet, we can just stick that snippet of html code into the page. JQuery makes all of this very easy, so you can avoid the complicated XMLHttpRequest stuff.
<script type="text/javascript">
var nextstart = 6;
var movies_per_page = 5;
$( "#next_btn" ).click(function() {
// this next line makes the ajax call for us, and the inline function
// is called when the response comes back from the server
$.get("controller/generate_suggestions/"+nextstart+"/" + movies_per_page,
function(data) {
// data is what comes back from the ajax call
// here it is the snippet of html, so let's display it as is
$( "#listA" ).html(data);
nextstart += movies_per_page; // so that the next click will load the next group of movies
});
});
</script>
Now we just need to populate the table when the page first loads, and you can do that by calling the same ajax call on page load with a similar $.get ajax call.
Once you understand all of this and have it working, then you should look into JSON, as it is a much better way of transferring data with ajax. And jQuery makes working with JSON much easier, too.
I want to know is there an easy way in order to be able to place images in a loop as below in like a slider? The user sees first image in a slider and then by using arrows for example, be able to slide to next to next or previous image. If user is on last image and wants to go on next image, it displays the first image again. if user is on first image and click on previous, it goes on last image. So it stays continuous.
Below is code where if there are no images then it displays a blank but if there are images, then displays those images in a slider:
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<?php foreach ($arrImageFile[$key] as $i) { ?>
<p><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></p>
<?php } ?>
<?php
}
//end:procedure image
A basic jquery slider is easy to implement with instructions of you fancy it: http://basic-slider.com/
Codrops is a nice site for front-end sollutions, I found this plugin that can maybe can help you, in this tutorial she teaches how to do it, and gives you a demo code too.
http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/
Enjoy it!