I'm using Magnific Popup for my Owl Carousel Slider. I just want the images to pop-up on screen. However, it doesn't seem to be working. The only thing it does it when I click the images, it opens up its src link. But I just want the Magnific Popup. Am I importing the files wrong? Am i formatting wrong? I've tried so much and can't seem to get the Magnific Popup to even display...
HTML/PHP
<div class="owl-carousel owl-theme details_banner">
#forelse($home_images as $image_model)
#php
$real_image = public_path('uploads/frontend/home/' . $image_model->name);
$image = asset('public/uploads/frontend/home/' . $image_model->name);
if (!file_exists($real_image)) {
$image=DEFAULT_IMG;
}
#endphp
<a class="popup1" href="<?php echo $image ?>"><img src="<?php echo $image ?>"/></a>
#empty
<a a class="popup1" href="<?php echo DEFAULT_IMG ?>"><img src="<?php echo DEFAULT_IMG ?>"/></a>
#endforelse
</div>
Javascript
<script type ="text/javascript">
$(document).ready(function() {
$('.popup1').magnificPopup({
type: 'image',
closeOnBgClick :true,
enableEscapeKey: true
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="vendor/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
I put this at the top of my file
<link rel="stylesheet" href="{{asset('public/frontend/css/owl.carousel.min.css')}}" />
<link href="{{asset('public/backend/css/jquery-confirm.min.css') }}" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="vendor/Magnific-Popup-master/dist/magnific-popup.css" media="screen"/>
Solved by putting these 2 lines above my Magnific Function
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
I'm working on an inserting form that inserts a product to a [ products draft ] so I have two tables
one called ( Drafts ) and the other is ( items ) each item in the last table (items) have a draft id.
When inserting a new Draft it supposes that the client who is adding the draft have entered the number of the products in the draft so when he entered the number of the products the application well call a number of forms to insert each one of them ( the determined number of products ) so I used jquery to insert the product forms inside a bootstrap 4 carousel as a ( carousel-item ) using (append) and within each form, there is a navbar ( shows which form is this ) like this ( 1 / 50 ) and my question is which element (DOM) I have to append my code to I tried this:- and nothing happens
Code Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(event){ // **** PS: I Think the problem is with the carousel-item status ( $actives )
var formscount = $('#count').val();
if (formscount > 0) {
for (i=0; i < formscount; i++) {
$('#demo').append($('<div class="carousel-item '+<?=$actives;?>+'"><center><nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"><a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+'</a></nav></center></div>'));
event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<form action="#" method="post">
<input name="count" id="count" type="number" class="form-control" placeholder="عدد النماذج">
<button onclick="myFunction(event)">إضافة النماذج</button>
</form>
<div id="demo" class="carousel slide" data-ride="carousel" style="height:50vh;">
<!-- Indicators -->
<ul class="carousel-indicators" style="background-color: black; color:black;">
<?
$i = 0;
foreach($result as $row){
$actives = '';
if($i == 0){
$actives ='active';
}
?>
<li data-target="#demo" data-slide-to="<?= $i; ?>" class="<?= $actives; ?>"></li>
<? $i++ ; }?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner canner">
<div class="carousel-item"><img src="<?= $row['imageurl']?>" Height=75% alt="inner"></div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
Update:- a new problem pops up is when I append a new ( carouesl-items ) nothing happens it just showing one active items even the indicator is a one
updated the snippet to see the code
When you run this in the console it says that current(i) is not defined, so if you remove it and leave just second occurrence of i instead you'll get this result:
My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts
I am using AngularJS to display results of my API (my first attempt at AngularJS), and want to use Jquery to add some effects to the page.
The problem is, Jquery seems to load before Angular has time to add images and other elements to the page. This prevents the JQuery effects from working I have been through numerous answers and tutorials, which center around the following solutions, none of which have worked for me.
Another approach suggested was to put the JQuery into "directives", but how would I put the contents of 3 large javascript libraries into an AngularJS directive? Sorry, I'm new in Javascript!
Here are the unsuccessful attempts:
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Angular is loaded !-->
angular.element(document).ready(function () {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Jquery-main is loaded !-->
$(document).ready(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
Here are the relevant extracts of my code:
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>MyWebpage</title>
<!-- Template includes !-->
<link media="all" rel="stylesheet" href="./css/slider-revolution.css">
<link media="all" rel="stylesheet" href="./css/all.css">
<link media="all" rel="stylesheet" href="./css/style.css" class="color">
</head>
<body ng-app=“myApp">
<div ui-view></div>
</body>
<!-- Application Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>
<!-- Template scripts !-->
<!-- Application Scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/indexController.js"></script>
app.js :
...
state('index', {
url: '/',
templateUrl: '../views/indexView.html',
controller: 'IndexController as user'
...
indexView.js
...
<!— JQuery plugin gallery -->
<div class="gallery responsive">
<div class="mask" ng-if=“myStuff.banner">
<ul class="slideset">
<ul style="margin:0px; padding:0px">
<li class="slide" data-transition="slidedown" data-slotamount="10" data-masterspeed="300" data-thumb="" ng-repeat="banner in user.banner" width="300">
<! -- load a big ol’ picture !—>
<img ng-src="../../storage/img/{{banner.image.image_url}}">
<div class="caption text-box lfl lfl" data-x="-91" data-y="140" data-speed="300" data-start="800" data-easing="easeOutExpo">
<h1><span>{{banner.banner_title}}</span></h1>
<a class="more" href="{{banner.banner_link}}">READ MORE</a>
<div style="" class="tp-leftarrow tparrows default"></div>
<div style="" class="tp-rightarrow tparrows default"></div>
</div>
</li>
</ul>
</div>
</div>
...
indexController.js:
...
// gets all the data from my API, including image src
vm.getMyStuff = function() {
$http.get('http://localhost:8888/api/public/myapistuff).success(function(myStuff) {
vm.myStuff = myStuff;
}).error(function(error) {
vm.error = error;
});
}
}
})();
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
I'm currently running into a problem where inside my HTML document, I have a carousel, and inside each slide a new button shows up, all doing the same thing. Each one of these buttons is a navbar-toggle button, which displays a navbar if it is pressed.
I problem I'm having is that in the code I was given, it only accounts for one of these buttons to work, the first one to load, as it declares the variable by var showRightPush = document.getElementByID. The problem is that I want to be able to click this button on every slide.
Below is my code, the old code, as well as the code in the full context.
Thanks.
MY CODE
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'navbar-toggle' );
};
</script>
OLD CODE
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
</script>
FULL CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name'); ?> </title>
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css" rel="stylesheet">
<!-- Sidebar core CSS -->
<link href="<?php bloginfo('template_directory'); ?>/css/simple-sidebar.css" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/default.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/component.css" rel="stylesheet">
</head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3><?php bloginfo('name'); ?></h3>
About
Submit
Subscribe
Follow
Contact
</nav>
<?php
$number = 0;
query_posts(array('post_type' => 'facts'));
if(have_posts()):
?>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php while(have_posts()): the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<?php while(have_posts()): the_post(); ?>
<div class="item">
<nav class="navbar navbar-top navbar-inverse visible-xs <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" id="showRightPush" class="btn btn-default navbar-toggle" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="<?php bloginfo('template_directory'); ?>/images/brains.png" alt=""> </a>
</div> <!-- end navbar-header -->
</div> <!-- end container -->
</nav> <!-- end navbar -->
<nav class="navbar navbar-fixed-bottom navbar-inverse visible-xs bottom-nav-colour" role="navigation">
<div class="container">
<div class="navbar-header text-center">
<ul class="bottom-directions">
<li><img src="<?php bloginfo('template_directory'); ?>/images/prev.png" alt=""></li>
<li><img src="<?php bloginfo('template_directory'); ?>/images/random.png" alt=""></li>
<li><img src="<?php bloginfo('template_directory'); ?>/images/next.png" alt=""></li>
<ul>
</div> <!-- end navbar-header -->
</div><!-- /.container -->
</nav> <!-- end navbar -->
<div class="fact-number-container <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>">
<div class="container">
<div class="fact-header">
<h3>/Fact <span class="fact-number"><?php echo(types_render_field("fact-number", array())); ?></span></h3>
</div> <!-- end fact-header -->
</div> <!-- end container -->
</div> <!-- end fact-number-container -->
<div class="fact-text-container">
<div class="container">
<div class="fact-text">
<p><?php echo(types_render_field("fact-text", array())); ?></p>
</div> <!-- end fact-text -->
</div> <!-- end container -->
</div> <!-- end fact-text-container -->
<div class="tweet-this-container">
<div class="container">
<a href="#">
<div class="tweet-this ">
<p><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="">Share this fact like a champ</p>
</div> <!-- end tweet-this -->
</a>
</div> <!-- end container -->
</div> <!-- end tweet-this-container -->
</div> <!-- end item -->
<?php endwhile; ?>
</div>
</div>
<?php endif; wp_reset_query(); ?>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/classie.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/modernizr.custom.js"></script>
<script type="text/javascript" src="//use.typekit.net/gyv3ykj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'navbar-toggle' );
};
</script>
<script>
jQuery(document).ready(function(){
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
});
</script>
</body>
</html>
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
showRightPush.onclick = function() {
/* ... */
};
Oh god, that won't work!
I've just answered this question: Javascript change width of div onclick
And will just copypaste my answer:
document.getElementsByClassName returns somewhat an array of
elements, so you cannot simply refer to it as a DOM element in hope
that it will work as you refer to each element of the collection (that
is possible in jQuery, btw), so you have to use the foreach loop
(doesn't matter how are you gonna achieve this -- via simple for(),
or for(x in y), or any other way).
I usually use Array.forEach function, but the specific type of an
array returned by the document.getElementsByClassName does not have
such function in prototype, so you have to use
[].forEach.call(inWhat,function(what){}) syntax, or fallback to
for(...) syntax.
First of all, be aware that the getElementsByClassName method will only work for versions of Internet Explorer from 9 and up. You can use a polyfill like this one to enable the functionality in older browsers, or use some other method to find the elements with the correct class name. Having said that, you'll have to iterate over the buttons and bind the click event for each of them.
var showRightPush = document.getElementsByClassName( 'navbar-toggle' );
for (var i = 0; i < showRightPush.length; i++) {
showRightPush[i].onclick = function() { ... }
}
I don't really understand what you mean, it is not very clear. But as far as I understand you should do something like this (I am using jQuery since you tagged it)
$('.navbar-toggle').on('click', function() {
...some events
var class_header = $(this).parent().attr('class');
var index = $('.'+class_header).indexOf($(this).parent());
$('.'+class_header).eq(index+1).append('/*whatever you want, here your button */');
};