JQuery cycle plugin within ajax content - javascript

I am trying to make a slideshow using the jquery cycle plugin (http://jquery.malsup.com/cycle/) on my wordpress site.
The way it works is, when the page loads, I click a button named ".submit" and then ajax content comes up on the screen and a div named '.modal' changes its visibility from hidden (display:none) to visible and inside, it has a container that shows a slideshow from the div #slideshow.
I tried to make it that when the ajax content changes visibility, the cycle plugin will then load.
When I do this I get no error messages but the slideshow doesn't work.
Here is my code:
jQuery(document).ready(function() {
jQuery('.submit').click(function(e) {
e.preventDefault();
var mod_shadow = jQuery('#modal_shadow');
var container = jQuery('.modal');
mod_shadow.show();
container.show();
var data = {
'action': 'modal_ajax',
'nonce': '<?php echo $ajax_nonce; ?>'
};
jQuery.post('<?php echo admin_url('admin - ajax.php '); ?>', data, function(response) {
container.replaceWith(response);
});
});
});
jQuery('.modal').on('show', function() {
jQuery('#slideshow').cycle({
fx: 'scrollLeft'
});
});
<?php
// ...
add_action( 'wp_footer', 'modal_init');
function modal_init() {
if (!bp_is_user() || !is_user_logged_in()) {
return;
}
$ajax_nonce=w p_create_nonce( "nonce");
}
?>
<div id="modal_shadow" style="display: none;"></div>
<div class="modal" style="display: none;">
<div class="modal-content-wrap">
<div class="modal-title comp-loading-icon">
<div class="bp-loading-icon"></div>
</div>
</div>
</div>
<div class=".modal-content">
<div style="width: 250px">
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</div>

Related

subimage shows when mainimage is clicked

i want to make a toggle image like when i clicked the image the sub image will show up something like that... this is the image that has a toggle function..
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$albumname='';
$album = $carousel->get_album($user_id);
foreach ($album as $key => $myalbum) {
$albumname = $myalbum['album_name'];
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
<p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
</div>
<p></p>
</div>
<?php
}
?>
this is where my function goes..
<script type="text/javascript">
$(document).on('click', 'img[data-id]', function () {
var selected = $(this).attr('data-id');
$ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();
});
</script>
this is where the sub image will show up. once that i clicked the image..
<div class="col-md-12 picforalbum">
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$album = $carousel->get_photoINalbum($albumname,$user_id);
foreach ($album as $key => $pic) {
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
</div>
<p></p>
</div>
<?php
}
?>
</div>
but the problem is when i tried to click the toggle image nothing happens...
Assuming that you want a toggle function for your image, I went ahead and built a simple JSfiddle. (As the picture takes a bit of time to load based on your net connection, please wait for a few seconds after clicking the image.)
What you need to do is basically call a function through onclick() on your image which changes the src attribute of your img tag. Thus if you maintain a boolean variable, you can easily alternate between true and false to change your image. So for true you'd have link1 and for false you'd have link2.
EDIT : Since you said that the image should act as a toggle for "sub" images, I have edited the code wherein an image acts as a toggle for another image beside it. Check out the updated fiddle and code snippet below.
Here is a simple example.
var toggle = false;
function toggle_img() {
if (toggle) {
document.getElementById("toggle_image").style.opacity = 0;
toggle = false;
} else {
document.getElementById("toggle_image").style.opacity = 1;
toggle = true;
}
}
<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>

Remove Link on scroll

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function
It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>
I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps

Disable div based on cookie.js

following code works but when I try to use it in popup it does not work use cookie.js
This part in heading
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$('#yes').on('click', 'a.disabled', function (e) {
onclickLink(e, $(this));
});
$("#yes").on('click', '#remove', function (e) {
alert('You are free to visit the page again');
$.removeCookie('link_disabled');
});
});
function onclickLink(event, this1) {
if ($.cookie('link_disabled') === null || $.cookie('link_disabled')==undefined) {
/* do whatever you want with link*/
$.cookie("link_disabled", 1, {
expires: 5
});
alert('Click OK to post your campaign NOW! You will only be allowed to boost a new campaign after 5 days.');
/*setting the cookie for 5 days*/
} else {
alert('You Have Already Boost This Campaign!');
event.preventDefault();
}
}
});//]]>
</script>
This part in body
<!-- Boost -->
<div id="yes">
<br><img src="../../../img/boost.png" alt="Logo" />
<br>
</div>
when try in popup it does execute post.php file but don't disable div here is my code in popup
<img src="http://mymobi.cards/images/button-boost.png" align="bottom" style="padding-left: 25px; padding-top: 10px">
<div data-role="popup" id="boost"><a data-rel="back" data-icon="delete" >
</a>
<div data-role="content" id="centerlocation">
<h2>Boost Your Campaign on Facebook</h2>
<img src="images/compressed-slide1.jpg"><br><br>
<div id="yes">
<br><img src="../../../img/boost.png" alt="Logo" />
<br>
</div>
</div>

Each not encapsulating blocks

I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.

How do I make content slide while erasing/adding it?

I am learning jquery/ajax and I got this problem... I want to make content slowly slide up for 1 second while erasing that content... I know that I can erase container content with a command like $(".page1" ).empty(); but I want to erase it slowly... In the mean time, I want server to work on something...
Here is what I have:
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery.js"></script>
<script src="mainScript.js"></script>
<title>ZZZZ</title>
</head>
<body class="main">
<div class="pageMain1" id="page">
<div class="page1">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src="1.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src="2.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
<div class="page2">
<button onclick="ButtonClick(0)">Button1</button>
<button onclick="ButtonClick(1)">Button2</button>
</div>
</div>
</body>
</html>
mainScript.js:
var SiteName="/test";
function ButtonClick(id){
$(".page1" ).empty();
if(id==0){
$.ajax({
type:"GET",
url:SiteName+"/A1.php",
dataType:"json",
success:success,
error:error
});
}
else{
$.ajax({
type:"GET",
url:SiteName+"/A2.php",
dataType:"json",
success:success,
error:error
});
}
}
function error(){
alert("Something went wrong.");
}
function success(arr){
var text=arr['text'];
$(".page1").append(text);
}
A1.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src=\"1.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"2.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
"));
?>
A2.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....
123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>random image</p>
<img src=\"3.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"4.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<img src=\"5.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
</div>
"));
?>
styles.css:
.pageMain1{
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
So here is how I imagine what I want... You press Button1 or Button2 and it will call ButtonClick() function... Which will send ajax request to the server and then will slowly start moving 2 buttons up, erasing the content of the div page1.
When the content of the div has been fully erased and client got data from the server it should start slowly writing new content, while moving buttons down.
I hope its easy to follow...
How do I make it slide like that?
i can not understand your code but for doing this things you can use fadeOut() and fadeIn() jquery functions or directly change the css opacity of your element with javascript or jquery animate() function.
Use callbacks on the slideX functions to append to and empty the div.
Example:
$(".page1").slideUp(400, function()
{
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
});
Thanks to everyone I came up with a solution...
I made 2 more global variables and made callbacks like this:
var lock1=0;
var text="";
function ButtonClick(id){
...
$(".page1").slideUp(function(){
if(lock1==1){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=2;
}
});
...
}
function success(arr){
text=arr['text'];
if(lock1==2){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=1;
}
}
If you want sliding effects. Use jQuery:
$('selector').slideUp();
$('selector').slideDown();
If you want fading in/ out effects:
$('selector').fadeIn();
$('selector').fadeOut();

Categories

Resources