I have list of items in ,UL, LI items, each li have a particular data attribute value. What I want is on clicking of each li item, another div which have same data-attribue need to show, ever other div should hide.
Example if I click on li with data-value= "devops", div which contain data-attribute="devops", should be visible and others should hide.
Following is my API code, you can just run that directly
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.recruitee.com/c/1832/offers?scope=active",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"Content-Type: application/json",
"Authorization: Bearer R0tYYXBTWG1Ddm5wbUgzT3pwa214Zz09"
),
));
$response = json_decode(curl_exec($curl));
curl_close($curl);
?>
<?php
$grouped_jobs = array();
$grouped_locations = array();
foreach($response->offers as $key=>$value){
$grouped_jobs[$value->department][] = array('title'=> $value->title, 'location'=> $value->location, 'url'=> $value->url);
}
foreach ($grouped_jobs as $key=>$value) {
foreach ($value as $job) {
array_push($grouped_locations, $job['location']);
}
}
?>
<div class="job_filter">
<ul class="dept_filter">
<?php foreach($grouped_jobs as $key=>$value){ ?>
<li class="departments" data-value="<?php echo $key; ?>"><?php echo $key; ?></li>
<?php } ?>
</ul>
<ul class="loct_filter">
<?php foreach(array_unique(array_map("ucfirst", $grouped_locations) ) as $loc){ ?>
<li class="locations"> <?php echo $loc; ?> </li>
<?php }?>
</ul>
</div>
<?php
foreach($grouped_jobs as $key=>$value){
echo '<div class="job_detailed" data-department='.$key.'>
<h1><u>'.$key.'</u></h1> <br>';
foreach($value as $job) {
echo '<p>'.$job['title'].'</p><br>
<p>'.$job['location'].'</p>
<a target="_blank" href='.$job['url'].'>Read More </a>';
}
echo '</div>';
}
?>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$( '.departments' ).click(function(index) {
var data_value = $(this).data('value');
console.log(data_value);
if($(this).data('department') == data_value) {
$(this).hide();
}
});
// For the mammal value
});
</script>
</html>
Where is the error in my jquery?
You can first hide all job_detailed divs then simply use $(".job_detailed[data-department=" + data_value + "]").show() to show only div which has same value as li which is clicked.
Demo Code :
$(document).ready(function() {
$('.departments').click(function(index) {
$('.dept_filter > li').not(this).removeClass("active")
$(this).addClass("active")
show_hide(); //call fn
});
$('.locations').click(function(index) {
$('.loct_filter > li').not(this).removeClass("active")
$(this).addClass("active")
show_hide(); //call fn
});
});
function show_hide() {
//check if location li is has active class
var locs = $(".locations.active").length > 0 ? $(".locations.active").text() : " ";
//check if dept li has active class or not
var data_value = $(".departments.active").length > 0 ? $(".departments.active").attr("data-value") : " ";
$(".job_detailed").hide(); //hide all divs
if ((data_value != " ") && (locs != " ")) {
//check if p tag has location and then get closest div show it
$(".loc:contains(" + locs + ")").closest(".job_detailed[data-department=" + data_value + "]").show()
} else if (locs != " ") {
//if only loc is slected get closest div show it
$(".loc:contains(" + locs + ")").closest(".job_detailed").show()
} else if (data_value != " ") {
//if only dept is selected show that
$(".job_detailed[data-department=" + data_value + "]").show()
}
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="job_filter">
<h5>Department : </h5>
<ul class="dept_filter">
<li class="departments" data-value="A">
A
</li>
<li class="departments" data-value="B">
B
</li>
<li class="departments" data-value="C">
C
</li>
<li class="departments" data-value="D">
D
</li>
</ul>
<h5> Location :</h5>
<ul class="loct_filter">
<li class="locations">aa</li>
<li class="locations">sss</li>
<li class="locations">mno</li>
<li class="locations">xyz</li>
</ul>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<p>ABC</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<!--added loc class to location-->
<p class="loc">abc</p>
<a target="_blank" href=''>Read More </a>
<p class="loc">xyz</p>
<a target="_blank" href=''>Read More </a>
<p class="loc">mno</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<p class="loc">xyz</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='D'>
<h1><u>D</u></h1> <br>
<p>something</p><br>
<p class="loc">mno</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='C'>
<h1><u>C</u></h1> <br>
<p>something</p><br>
<p class="loc">sss</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='D'>
<h1><u>D</u></h1> <br>
<p>something</p><br>
<p class="loc">aa</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='B'>
<h1><u>B</u></h1> <br>
<p>something</p><br>
<p class="loc">aa</p>
<a target="_blank" href=''>Read More </a>
</div>
Related
What happens is that the active link is removed on refresh, what should I do so on refresh it checks which link is on and adds the class? I believe this should be done with js, any tips are helpful thanks in advance.
I have this setup for links in my php file:
<?php if (!is_page('main')){ ?>
<div class="shop-categories layoutcolor1">
<li>
<a href="<?php echo get_term_link( 21, 'product_cat' ); ?
>">
<p class="first"><?php echo get_cat_name( 21 ); ?> </p>
</a>
<a href="<?php echo get_term_link( 20, 'product_cat' ); ?
>">
<p class="second"><?php echo get_cat_name( 20 ); ?></p>
</a>
<a href="<?php echo get_term_link( 18, 'product_cat' ); ?
>">
<p class="third"><?php echo get_cat_name( 18 ); ?></p>
</a>
</li>
</div>
<?php } ?>
And I have js:
$('.shop-categories li a').click(function() {
$('a').removeClass('active');
$(this).addClass('active');
});
fixed with:
$('.shop-categories li a').filter(function() {
return $(this).prop('href') === browserUrl;
}).addClass('active');
Try this:
var cp_url= window.location.pathname;
$('.shop-categories li').find('a').each(function() {
$(this).toggleClass('active', $(this).attr('href') == cp_url);
})
I think you need this...
$('.shop-categories li a').click(function() {
$(this).addClass('active').siblings('a').removeClass('active');
});
Every 5 seconds I'm fetching data from database for my notification. However, every 5 seconds the notification div is closing, and I want the div to stay open. How can I achieve this?
NOTE The ajax calling,fetching is working. I just want my notification div to stop closing when the setinterval triggered.
Here's the div
home.php
<div id="notificationsss">
</div>
$(document).ready(function()
{
loadnotif();
setInterval( loadnotif, 5000 );
$("#notificationsss").on("click",$("#notificationLink"), function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
});
});
function loadnotif(){
$.ajax({
url:'getrecords.php',
method:'POST',
data:{
"loadnotif": 1
},
success:function(data){
$('#notificationsss').html(data);
}
});
}
getrecords.php
if(isset($_POST['loadnotif'])){
$sql = "SELECT * FROM notification";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
$output = ' <ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<li id="notification_li">
<a href="#" id="notificationLink"><i class="fa fa-globe"></i>
<span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>
<div id="notificationContainer">
<div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
<div id="notificationsBody" class="notifications">';
while($row = mysqli_fetch_array($result)){
$output .=' <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
<div>
<img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
<p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
<p style="font-size:12px;">'.$row['date'].'</p>
<hr>
</div>
</a>';
}
$output .=' </div>
<div id="notificationFooter" style="background-color:#ba4f46;">See All</div>
</div>
</li>
</li>
</ul>';
echo $output;
}
I have tested it & found ok. Have you put your ajax called div inside getrecords.php file ? The process is - it will call that file & collect info from it & replace data inside your preferred div.
page1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
loadnotif();
setInterval( loadnotif, 5000 );
$("#notificationsss").on("click",$("#notificationLink"), function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
});
});
function loadnotif(){
$.ajax({
url:'getrecords.php',
type:'POST',
data:{
"loadnotif1": 1
},
success:function(data){
$('#notificationsss').html(data);
}
});
}
<div id="notificationsss">
</div>
getrecords.php should be like this
if(isset($_POST['loadnotif'])){
$sql = "SELECT * FROM notification";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
$output = ' <ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<li id="notification_li">
<a href="#" id="notificationLink"><i class="fa fa-globe"></i>
<span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>
<div id="notificationContainer">
<div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
<div id="notificationsBody" class="notifications">';
while($row = mysqli_fetch_array($result)){
$output .=' <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
<div>
<img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
<p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
<p style="font-size:12px;">'.$row['date'].'</p>
<hr>
</div>
</a>';
}
$output .=' </div>
<div id="notificationFooter" style="background-color:#ba4f46;">See All</div>
</div>
</li>
</li>
</ul>';
echo $output;
}
I'm trying to create a simple ecommerce website. Everything is going well but I can only add products on my cart when I'm in index.php. When I try to click the add_cart button on all_products.php page, it redirects me to the index.php page and doesn't add the product to the cart.
I wanted to be able to add products as well on all_products.php page. What is wrong with my code:
function.php( functions where the "add to cart" button is created and the function on what will happen when the add to cart button is clicked:
function getProd(){
if(!isset($_GET['cat'])){
global $con;
$get_prod = "select * from item order by RAND() LIMIT 0, 6";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?add_cart=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a> //THIS IS THE CREATION OF ADD TO CART BUTTON
</div>
";
}
}// if(!isset($_GET['cat'])){
}//END OF getProd()
cart() // This is what will the add to cart button is going to perform.
function cart(){
if(isset($_GET['add_cart']))
{
global $con;
$ip = getIp();
$pro_id = $_GET['add_cart'];
$check_pro = "select * from cart where ip_add = '$ip' AND p_id = '$prod_id" ;
$run_check = mysqli_query($con, $check_pro);
if(mysqli_num_rows($run_check)>0){
echo "";
}
else {
$insert_pro = "insert into cart (orderId,ip_add) values ('$pro_id','$ip')";
$run_pro = mysqli_query($con, $insert_pro);
echo "<script> window.open('all_products.php','_self')</script>";
}
}
}//cart()
all_products.php
<!DOCTYPE html>
<?php
include("../functions/function.php");
?>
<html>
<head>
<title>Online Shop</title>
<link rel='stylesheet' href='../CSS/style.css' media="all"/>
</head>
<body>
<!--Main Wrapper starts here!-->
<div class="main_wrapper">
<!--Header Wrapper starts here!-->
<div class="header_wrapper" >
<a href='index.php'><img id="logo" src="../Pictures/logo.png"/></a>
</div>
<!--Header ends here!-->
<!--Menu Bar starts here!-->
<div class="menubar">
<ul id="menu">
<li> Home </li>
<li> All Products </li>
<li> My Account </li>
<li> Sign Up </li>
<li> Shopping Cart </li>
<li> Contact Us </li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="Search Product"/>
<input type="submit" name="search" value="search" style='background-color:#80dfff; border:none;'/>
</form>
</div>
</div><!--Menubar ends here!-->
<!--Content Wrapper here!-->
<div class="content_wrapper">
<div id="sidebar">
<div id="sidebar_title"> Categories</div>
<ul id="cats">
<?php getCats(); ?>
</ul>
</div>
<!--CONTENT AREA starts here-->
<div id="content_area">
<?php cart(); ?>
<div id='shopping_cart'>
<span style='float:right; font-size:18px; padding-right:5px; padding:5px; line-height:40px;'>
Welcome Guest!
<b style='color:#336600'>SHOPPING CART</b>
Total Items:<?php total_items(); ?>
Total Price: <?php total_price(); ?>
<a href="cart.php" style='color:#336600'>Go to Cart</a>
</span>
</div>
<div id="product_box">
<!--CODE IN SHOWING ALL PRODUCTS-->
<?php
$get_prod = "select * from item order by ItemName";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?prod_id=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a>
</div>
";
}
?> <!--END OF ALL PRODUCTS-->
</div>
</div><!--END OF CONTENT AREA-->
</div><!--Content Wrapper ends here!-->
<div id="footer"><h2 style='text-align:center; padding-top:25px;'>© Jerlon Buenconsejo 2015</h2> </div>
</div><!--Wrapper-->
</body>
</html>
You are redirected to index.php because this is the page specified in your link :
<a href='index.php?prod_id=$prod_id'>
Change it for the name of your page. Also, you will need the cart() function to be called on top of your page.
You should consider to call a unique page which is addCaddy.php for an example, that redirect to the page where you were after inserting the product, or that you could call with ajax.
I have a php that looks like this
<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";
echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";
$subfolder = $_POST["category"];
$text = $_POST["category_text"];
if ($subfolder == "0"){
echo("Please <a href='gallery.html'>go back</a> and select a category");
echo "</div><br><br>";
echo "<footer>";
echo "<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>";
echo "</footer>";
echo "</div>";
exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array
//get array using array_push
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
$folder = pathinfo($folder);
array_push($categories, $folder["filename"]);
}
//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
if ($subfolder == $categories[$i]){
if (intval($countarray[$i]) == 0) {
echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
}
else
{
echo "<h3>Here are the images for the " .$text. " category</h3>";
echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
}
}
}
$folder = "images/".$subfolder."/";
// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
// <!-- Carousel items -->
foreach($images as $image) {
$count++;
if ( $count == 1 ){ $class = 'active ';}
else{ $class='';}
echo'<div class="carousel-inner">';
echo"<div class='".$class."item'>";
echo "<img src='".$folder.$image. "'</img></div>";
echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol>';
echo"<br><br>";
echo "<p> </p><a href='gallery.html'>Reselect</a>";
echo "</div>";
echo "<footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer>";
echo "</div>";
echo "</body></html>";
?>
As you can see bootstrap (min) is included, along with the combined css and jquery 11.3. the bootstrapgallery.js is a function that i took from a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
I have the link being tested out here. The first image shows but neither the arrows or the buttons work. I feel like i must be missing something blatantly obvious, but the code is the same as my fiddle so i don't understand!
Help! Thanks :) And Merry Christmas hohoho
EDIT:
this is my source:
<!doctype html>
<html><head><meta charset='utf-8'>
<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>
<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div><ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol><br><br><p> </p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer></div></body></html>
Your HTML structure should look like below, but you have a carousel-inner class wrapping each item in your HTML loop, which should not be.
Should be like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="" alt=""/>
</div>
<div class="item">
<img src="" alt=""/>
</div>
</div>
</div>
Yours looks like this:
<div id="myCarousel" class="carousel slide">
<div class="item">
<img src="" <="" img="">
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
</div>
Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066