Carousel I have only displays one post at a time. Ideally, I would like to use PHP to display a mysql query. What's wrong from the JS and HTMl code?
When I see the Fiddle the demo, it works great until I put it in my website. At first glance is there something wrong.
What happens is the elements of slides just show up as one slide all the way to the left.
<div class="carousel-inner">
<?php
$count_row = 0;
while ($row2 = mysqli_fetch_array($result)){
if ($count_row == 0 ){
?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row + 1;
} else if (count_row == 2) {
$count_row = $count_row + 1; ?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row+1;
} else if (count_row == 1) { ?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row+1;
} else { ?>
<div class="item">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row + 1;
}
?>
<?php };?>
</div>
JAVASCRIPT
$(document).ready(function() {
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
Related
I am using trying to use code igniter to create an interface where users can check tickboxes next to images, changing a value in our database.
The challenge is that when users check the tickboxes, values are not changed in the database.
If I manually change values in the database, the tickbox values are changed on the interface. But if the user checks the tickbox, the database doesn't change. How puzzling!
The code and interface screenshot are below. The functions veto() and unveto() appear not to be called. I've put an alert in, and they have not been triggered.
Any help or suggestions would be quite helpful, as I'm not sure how to fruitfully approach this problem.
interface
see javascript followed by relevant CI controller and view snippets below
document.addEventListener('DOMContentLoaded',function(){
// ********** PREVIEW *********************
});
//perform an ajax call to update the server DB
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
//console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementById("previewVeto");
previewVeto.value = response.data[1];
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
function previews()
{
$msg='';
$this->session->set_userdata('msg',$msg);
if($this->session->userdata('logged_in_user'))
{
$data['previews']=$this->package->getPreviews();
$data['previewActive']=$this->package->getPreviewActive();
$previewDeadline= date('M j, Y',strtotime($this->package->getPreviewDeadline()));
$data['instructions'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('previewInstructions'));
$data['inactiveMessage'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('inactivePreview'));
$data['vetoPrompt'] = $this->util->getMessage('previewVetoPrompt');
//print_r($data);
$this->load->view('header_view');
$menu_data['active']=$this->user->getActive(15);
$this->load->view('menu_view',$menu_data);
$this->load->view('user_previews',$data);
$this->load->view('footer_view');
}
else
{
redirect('login', 'refresh');
}
}//end previews
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
</div><!-- closing title column div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){ print_r($thisPreview->preview_id); ?>
<form class="form-custom">
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<?php if($thisPreview->veto) { ?>
<input type="checkbox" id="veto" value="1" onclick="veto()" checked>
<?php }else{ ?>
<input type="checkbox" id="unveto" value="0" onclick="unveto()" >
<?php } ?>
<!--span class="myicon myicon-save"></span-->
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
</form>
<?php } ?>
</div><!-- row -->
</div><!-- container -->
</section>
</main>
</body>
The way to update the server from a checkbox is an ajax call.
Your original code was missing a submit button and the date from the checkbox.
added 'vetodata' to ajax call in function veto()
added document.form[0].submit(); to function veto()
See revised and working! javascript and 'view' code -- there were no changes to the controller
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId,
vetodata: "1"
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementByName("previewVeto");
previewVeto.value = response.data[1];
document.form[0].submit();
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<a href="#" class="back-link">
<i class="back-link__icon">
<svg class="svg-icon-back"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-back"></use></svg>
</i>
<span>To Incoming Orders</span>
</a>
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
<div class="col-12 col-lg-6">
<h2 class="block-title">Instructions</h2>
<p class="regular-text"><?php if($active === TRUE) {echo $instructions;} else {echo $inactiveMessage;} ?></p>
</div><!-- close instruction col div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){
$preview_id = $thisPreview->preview_id;
$preview_name = "preview_".$preview_id ?>
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<input class="largerCheckbox" <?php echo $thisPreview->veto ? "checked" : ""; ?> type="checkbox" id="previewVeto"
<?php if(!$active) echo "disabled"; ?>
onclick="veto('<?php echo $active ? $thisPreview->preview_id : ""; ?>')">
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<?php } ?>
</div><!-- row -->
I am trying to create a function that when you click up it appends to the div what you want and if you press up again will show what you want again and replace the other data, same for when you press down.
The idea is to have 5 options, the option that it starts on is decided on that users info. So say they are number 3 it will start on number 3 and if you press up it will go to number 2 if you press down it will go to number 4 and show the data with those numbers.
What I am trying to figure out is how can I make this option and then when clicked do what I want it to do.
Idea of what it looks like:
When you press the blue up will go up a page and only show the player that are in diamond 2. and same for the rest
<main>
<div class="panel">
<div class="panel-body"></div>
<div class="league-banner" style="height: 50px;">
<div class="league-number" style="top: 15px; position: relative;">
<div class="league-rank">
III
</div>
<div class="league-buttons">
<img src="img/league/up.png"/>
<a class="sq-btn" href="" style="position: relative; top: -30px;"><img src="img/league/down.png"/></i></a>
</div>
</div>
<span style="color:#57a2dd; font-size: 20px;">DIAMOND 5 </span>
<span style="font-size: 20px;" class="second-banner">Diamond V</span>
<div class="light" style="font-size:20px;">Lee Sin's Redeemers</div>
</div>
<div class="league-top">
<div class="stats-header stats-row">
<div class="table-cell">Rank</div>
<div class="table-cell">Summoner</div>
<div class="table-cell">Emblems</div>
<div class="table-cell">Wins</div>
<div class="table-cell">Losses</div>
<div class="table-cell">Win Rate</div>
<div class="table-cell">Points</div>
</div>
<div class="scroll-league" id="scroll-league">
<?php
if ($league_list){
$entrieszlist = $league_list->entries;
usort($entrieszlist, function($acl,$bcl){
return $bcl->leaguePoints-$acl->leaguePoints;
});
$index = 0;
foreach ($entrieszlist as $datazlistleague){
$playerleagueId = $datazlistleague->playerOrTeamId;
$playerleagueNameSummoner = $datazlistleague->playerOrTeamName;
$playerleagueNameSummonerDivison = $datazlistleague->division;
$playerleagueNameSummonerWins = $datazlistleague->wins;
$playerleagueNameSummonerLosses = $datazlistleague->losses;
$playerleagueNameSummonerLP = $datazlistleague->leaguePoints;
$playerleagueNameSummonerGamesPlayed = $playerleagueNameSummonerWins + $playerleagueNameSummonerLosses;
$playerleagueNameSummonerGamesWinRate = (100/$playerleagueNameSummonerGamesPlayed)*$playerleagueNameSummonerWins ;
$playerleagueNameSummonerLPtarget = $datazlistleague->miniSeries->target;
$playerleagueNameSummonerLPWins = $datazlistleague->miniSeries->wins;
$playerleagueNameSummonerLPLosses = $datazlistleague->miniSeries->losses;
$playerleagueNameSummonerLPProgress = $datazlistleague->miniSeries->progress;
if (isset($datazlistleague->miniSeries)){
$miniSeriesdatayesnodata = 1;
} else {
$miniSeriesdatayesnodata = 2;
}
$summonerData1;
if(isset($playerleagueNameSummoner)) {
$formatedUserName1 = str_replace(" ", "", $playerleagueNameSummoner);
$formatedUserName1 = mb_strtolower($formatedUserName1, 'UTF-8');
$sql1 = 'SELECT * FROM players_data WHERE sum_name = "' . $formatedUserName1.'"';
$result1 = $conn->query($sql1);
if($result1->num_rows > 0) {
while ($row1 = $result1->fetch_assoc()) {
$GLOBALS['summonerData1'] = unserialize($row1['summoner_info']);
}
} else {
storeData($conn, $apiKey, $playerleagueNameSummoner, 'players_data');
header("Refresh:0; url=leaguesprofile1.php?userName=".$_GET['userName']."");
}
} else {
}
$sumiconid1 = $summonerData1->profileIconId;
$index++;
echo '<div class="stats-data stats-row loser" data-ladder_id="'.$playerleagueId.'" data-ladderdivison_id="'.$playerleagueNameSummonerDivison.'" data-promos1or2="'.$miniSeriesdatayesnodata.'">
<div class="table-cell rank">'.$index.'</div>
<div class="table-cell change-selected">
<a href="profile2.php?userName='.$playerleagueNameSummoner .'">
<div style="display: table;">
<div style="display: table-row;">
<div class="table-cell-2">
<div class="summoner-icon" style="background-image: url(http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/'.$sumiconid1 .'.png);"></div>
</div>
<div class="table-cell-2">'.$playerleagueNameSummoner .'</div>
</div>
</div>
</a>
</div>
<div class="table-cell">
<div style="display: inline-block;" original-title=""> ';
if($datazlistleague->isHotStreak == true){
echo '<img src="img/league/Hot_streak.png"/>';
} else if($datazlistleague->isHotStreak == false){
echo '<img src="img/league/streak_none.png"/>';
}
echo '</div><div style="display: inline-block;" original-title="">';
if($datazlistleague->isFreshBlood == true){
echo '<img src="img/league/Recruit.png"/>';
} else if($datazlistleague->isVeteran == true){
echo '<img src="img/league/Veteran.png"/>';
} else if ($datazlistleague->isFreshBlood == false && $datazlistleague->isVeteran == false){
echo '<img src="img/league/Recruit_none.png"/>';
}
echo '</div>
</div>
<div class="table-cell change-selected">'.$playerleagueNameSummonerWins.'</div>
<div class="table-cell change-selected">'.$playerleagueNameSummonerLosses.'</div>
<div class="table-cell change-selected">'.number_format((float)$playerleagueNameSummonerGamesWinRate, 1, '.', '').'%</div>
<div class="table-cell change-selected">';
echo $playerleagueNameSummonerLP.'LP';
echo '</div>
</div>';
}
}
?>
</div>
</div>
</div>
</main>
CODE - What it should do is depending if the data-attribute called "data-ladderdivison_id" is I then show when page I showen if it is V then show that data on page V but using a up and down button from 1 - 5 to change.
Thanks in advance
You'll need to look at the structure your data is in and determine fairly early on in the script which bit is the "current important" entry point, that would probably be an indexer into an array containing your leagues.
You can do this for example by passing a parameter via the url that you then pickup in the beginning of your script, or initialize to some predefined point (probably 0 for the first league).
// take the ?league=... from the url or set it to 0
$currentLeagueIndex = isset($_GET['league']) ? $_GET['league'] : 0;
then where you're rendering the buttons you can point to the current url with that index plus or minus one.
$hrefPrevious = $currentLeagueIndex-1 > -1 // bounds check for sanity
? 'my-url?league=' . ($currentLeagueIndex-1);
: 'javascript:void()';
$hrefNext = ($currentLeagueIndex+1) < count($allLeagues)
? 'my-url?league=' . ($currentLeagueIndex+1);
: 'javascript:void()';
Hello All these codes working ok for me except one thing - I'd like to stop it when is come to last slide ( 6th slide ) but he is going to clone 1 , 2 and 3 more slides (depends of resolution) and after that it's stops. I am beginner in java script and cannot find solution..Please anyone:
HTML
<div id="package" class="carousel carousel-showmanymoveone slide row" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#package" data-slide="prev"><i class="glyphicon glyphicon-chevron-left strel"></i></a>
<a class="right carousel-control" href="#package" data-slide="next"><i class="glyphicon glyphicon-chevron-right strel"></i></a>
</div>
JAVASCRIPT
(function(){
// setup your carousels as you normally would using JS
// or via data attributes according to the documentation
// http://getbootstrap.com/javascript/#carousel
$('#package').carousel({ interval: false, pause:true });
}());
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
//listener for after slide
jQuery('.carousel-showmanymoveone').on('slid.bs.carousel', function(){
//Each slide has a .item class to it, you can get the total number of slides like this
var totalItems = jQuery('.carousel-showmanymoveone .item').length;
//find current slide number
var currentIndex = jQuery('.carousel-showmanymoveone .item div.active').index() + 1;
//if slide number is last then stop carousel
if(totalItems == currentIndex){
clearInterval(jQuery('.carousel-showmanymoveone .item').data('bs.carousel').interval);
} // end of if
});
}
});
}());
Setting the wrap option to false makes the carousel to stop cycling automatically.
$('#package').carousel({
interval: 1000,
wrap: false
});
Also, you can use data-wrap="false" in the carousel's HTML
EDIT
You can detect first and last slide with this code:
$('#package').on('slid.bs.carousel', '', function() {
var $this = $(this);
if($('.carousel-inner .item:first').hasClass('active')) {
console.log('first slide');
} else if($('.carousel-inner .item:last').hasClass('active')) {
console.log('last slide');
}
});
here i am trying to make animation in which 1st image should slide and next second image and then third image and so on but now all of them are being animated at a time any help what to do.?
<script>
$(window).load(function(){
$(".frame-container").each(function(){
var frameheight=$(this).innerHeight();
var framewidth=$(this).innerWidth();
var refRatio = framewidth/frameheight;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
// $(this).addClass("portrait");
var moveImage = (imgH - frameheight)/2;
//alert(moveImage);
$(this).children("img").css({'position':'relative','top':'-'+moveImage+'px'});
$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );
} else {
// alert(refRatio+"#####"+(imgW/imgH));
// $(this).addClass("landscape");
var moveImage = (imgW - framewidth)/2;
//alert(moveImage);
$(this).children("img").css({'position':'relative','left':'-'+moveImage+'px'});
$(this).children("img").animate({ left: '-100px','position':'relative' }, 5000 );
}
});
});
</script>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box1 frame-container">
<img src="images/8.JPG"/>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box2 frame-container"><img src="images/9.JPG" /></div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box3 frame-container"><img src="images/10.JPG" /></div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box4 frame-container"><img src="images/11.jpg" /></div>
<div class="box5 frame-container"><img src="images/12.JPG" /></div>
</div>
</div>
Instead of sliding all the images at once using this code:
$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );
Slide next after the first has completed it's slide animation, using this code:
var images = $(this).children("img");
var counter = 0;
function slideImage()
{
if(counter < images.length)
{
$(images[counter]).animate(
{ top: '-100px',position:'relative' },
5000,
function(){
slideImage();
}
);
counter++;
}
}
slideImage();
EDIT:
To mainatain the animation, add the following code after counter++;:
if(counter >= images.length)
counter = 0;
I have the following jQuery code below:
My Html:
<div class="input-group top_buffer_small">
<label class="col-md-3 col-sm-3 text_right top_buffer_mini">Available Colors:</label>
<div class="col-md-9 col-sm-9 text_right">
<table id="availColors" align="center">
<?php
//instantiate color class
$colors = $Item->getColors();
$colorCount = $Item->getColorCount();
if($colorCount > 0){
//create a mod since we only want to show 4 colors per row.
$remainder = $colorCount%4;
$x=0; //counter variable
if(is_array($colors)){
foreach ($colors as $key=>$value){
foreach ($value as $color) {
if($remainder == 0){
//if we are at 0, make a new row
echo "<tr>";
}
//print_r($Item->getProductVariations($color));
?>
<td style="background-color:#<?php echo $color;?>" data-pictures="<?php echo htmlspecialchars(json_encode($Item->getProductVariations($color))); ?>" data-directory="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/';?>"></td>
<?php
if($remainder == 3){
//end the row
echo "</tr>";
}
//$x++;
}
}
}
}
?>
</table>
</div>
</div>
Basically, I am trying to get the array values which are being passed from the to my javascript. After I get the values, I am trying to make all the image thumbnails change to the pictures on click of a color.
This is the div I am aiming to change the picture thumbnails:
<div class="row">
<div class="featured_container_small" id="productThumbnails">
<h5>Other Views</h5>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<!-- <div class="col-md-3 buffer_bottom"><img src="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/'.$smallimage1?>" class=" center_image responsive_image"></div> -->
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
</div>
<div class="row">
<div class="col-md-12"><nbsp></nbsp></div>
</div>
<div class="clear"></div>
</div>
Then this is my jquery:
$(function(){
$("#availColors td").click(function(){
var imageDirectory = $(this).attr('data-directory');
var pictures = $(this).attr('data-pictures');
var pictureArray = JSON.parse(pictures);
var productThumbnails = $("#productThumbnails img");
var thumbnailCount = productThumbnails.length;
var keys = Object.keys(pictureArray);
var pic = "";
var src="";
for (var i = 0; i < keys.length; i++) {
pic = pictureArray[keys[i]];
productThumbnails[i].attr("src",imageDirectory+pic+".jpg");
}
});
});
When I perform my click function, an error returns saying "undefined is not a function".
I don't know why its doing this. Some help please.
When you iterate over the images collection, productThumbnails[i] returns the underlying HTMLImageElement which doesn't provide the attr() method. Try to wrap it with jQuery instead:
$(productThumbnails[i]).attr("src",imageDirectory+pic+".jpg");
Also, when using jQuery, the best way to access arbitrary data associated with your DOM elements is using the data() method:
var imageDirectory = $(this).data('directory');
var pictures = $(this).data('pictures');
As a bonus, you'll also get JSON deserialization out of the box and there's no need for JSON.parse():
var pictureArray = $(this).data('pictures');