I have flexslider activated with a ACF for each loop using this code:
$(window).load(function() {
// The slider being synced must be initialized first
$('#gallerycarousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
directionNav: true,
itemWidth: 300,
itemMargin: 10,
animationLoop: true,
asNavFor: '#galleryslider'
});
$('#galleryslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
directionNav: true,
sync: "#gallerycarousel"
});
});
<div class="flexslider" id="galleryslider">
<ul class="slides">
<?php
$gallery = get_field('fullgallery');
foreach( $gallery as $galleryImage ):
$image = $galleryImage['url']; ?>
<li style="background-image: url('<?php echo $image; ?>')"></li>
<?php endforeach; ?>
</ul>
</div>
<div class="flexslider" id="gallerycarousel">
<ul class="slides">
<?php
foreach( $gallery as $galleryImage ):
$image = $galleryImage['url'];
?>
<li style="background-image: url('<?php echo $image; ?>'); background-size: cover;">
<div class="viewImg">
<a class="fancybox" rel="gallery1" href="<?php echo $image; ?>" title="<?php echo $galleryImage['caption']; ?>"><i class="fa fa-search"></i></a>
</div>
</li>
<meta property="og:image" content="<?php echo $galleryImage['url']; ?>" />
<?php endforeach; ?>
</ul>
</div>
My issue is that on click of a thumbnail, it takes me to the wrong large image, I have tried re-downloading flexslider but no luck, I have also tried replacing the for each loop with just static items and, that seems to fix it.
I am unsure on how to get it to work with the foreach loop, does anyone have a solution for this?
It seems removing this: <meta property="og:image" content="<?php echo $galleryImage['url']; ?>" /> fixed the issue.
Related
I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
Below given is the code for my view
<div class="col-md-6">
<?php
if($fanclub_count<2)
{?>
<?php $form = ActiveForm::begin();?>
<?= $form->field($model_fanclub, 'crew_member_id')->dropDownList(ArrayHelper::map(MovieCrewMembers::find()->all(),
'id', 'name'),['prompt'=>'Select Crew','style'=>'width:50%']) ?>
<?= Html::submitButton(Yii::t('app', 'Join'),
['class' =>'btn btn-success']) ?>
<?php ActiveForm::end();
}?>
</div>
<div class="col-md-6">
<?php
if($user_clubs!=null)
{
foreach($user_clubs as $active_clubs )
{
$image= '/movie_crew_members/' . $active_clubs[0]."_".$active_clubs[2];
$path = \Yii::$app->thumbler->resize($image,55,55,Thumbler::METHOD_NOT_BOXED,true);
?>
<div class="col-md-6">
<img src="cache/<?php echo $path?>"></br>
<a href="<?php echo \Yii::$app->getUrlManager()->createUrl( [ '/users/change_fanclub',
'id'=>$active_clubs[0],'userid'=>$user_id] ); ?>">
<i class="fa fa-times-circle-o fa-2x"></i></a>
</div>
<?php
}
}
else
{
echo "No Active Clubs";
}
?>
</div>
there are basically two things a dropdown box and a image with a icon which redirect to a action. Sometimes it works perfect sometimes not. ie,when i click the drop down it gets redirected to users/change_fanclub. how is it possible? dropdown is independent of action users/change_fanclub. then how come it get redirected there?
I solved the problem by using this
<?php
$form = ActiveForm::begin( [
'method' => 'post',
'action' => [ "users/profile","user_id"=>$user_id ],
] );
?>
i don't know why i got redirected to users/change_fanclub when i click on the submit button of model_fanclub instead of going to users/profile. But i removed the error by specifying the action in ActiveForm.
I would like to drag and clone the image with increment of the id. I am currently facing a problem, when i drag and the image is clone, id cannot be created. I would also like to double click on the clone image and a popup form will be generated. Can anyone help me?
<html>
<head>
<meta charset="utf-8">
<title>abcd</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="abcd.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
enter code here$(function() {
$(".image").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
})
$("#div1").droppable({
drop: function(event, ui) {
if (ui.draggable[0].id) {
$(this).append($(ui.helper).clone().draggable({ containment: "#div1", scroll: false }));
}
}
});
});
$("img.image").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
});`
</script>
</head>
<body>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<form>
<p>URL:<span id="sprytextfield1">
<input name="url" type="text" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" />
</p>
</form>
<div class="loader"></div>
</div></div>
<div class="wrapper">
<div class="banner">
<h2><img src="untitled.png" width="305" height="166" alt="logo">iLiT - Input Module</h2>
</div>
<div class="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>Item 1
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 2</a>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li>Item 3.1.1</li>
<li>Item 3.1.2</li>
</ul>
</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<div class="sidebar">
<img src="images.jpg" alt="image" name="drag1" width="55" height="55" class="image" id="drag1">
<img src="images1.jpg" width="55" height="55" alt="image1" name="drag2" id="drag2" class="image">
<img src="images2.jpg" width="55" height="55" name="drag3" id="drag3" class="image"></div>
<div class="content"><div id="div1"></div></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Try
var idc = $(".image").length;
$("#div1").droppable({
drop: function(event, ui) {
if (ui.draggable[0].id) {
$(this).append($(ui.helper).clone().attr('id', 'drag' + ++idc).draggable({ containment: "#div1", scroll: false }));
}
}
});
Demo: Fiddle
I like to add autocomplete feature for my jquery mobile page on a text box such that when user enters it should show the results in listview format. The code below shows the results but not in the listview format. Can someone point out how to fix it. Thanks.
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text">' + item.zipcodeId + '</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You need to call the listview() function on your content after inserting the new content:
$('#suggestions').listview();
See Elijah Manor's explanation for the details.
Try calling the listview refresh method in your ajax success function.
$('#suggestions').listview('refresh');
try this one
In <li> tag remove class..... class="ui-btn ui-btn-icon-right ui-li "
Then it shows results in list view formats
I am using the following code to View Complete Messages from Users, on my web page.
u can see my web page here : http://team-kh.hireexpertprogrammers.com/~maiarn/Admin.php
But the only prob is some logic Error here, When i randomly click on the View Complete link, the dialog Box, shows me the title and content of the first message. How can i avoid this error:
Such that, which View Complete Link is clicked, the dialog box shall show the title and content of that row , message.
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"FullName");
$Name = $ f1;
$f2=mysql_result($result,$i,"EmailAddr");
$string=mysql_result($result,$i,"Message");
$limit=10;
$string1 = myTruncate($string,$limit);
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $string1; ?></font>
<a id="button1"href="#">View Complete</a>
<div id="dialog1"title="<?php echo $Name; ?>" style="display: none;">
<?php echo $string; ?></div>
</td>
</tr>
<?php
$i++;
}
?>
The script is
<script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a#button1").click(function(e) {
e.preventDefault();
$("#dialog1").dialog({height: 300, width: 500, modal: true});
});
});
</script>
You either need to assign dynamic ID's to your dialogs based on a number or some other distinguishing string or load the information from the row into a single dialog before you display it (which would be preferable).