So I'm building a WordPress theme for the first time and a few days back I got a memory size error that didn't make sense to me because there was absolutely nothing special inside, just some simple HTML. Every time I separated the HTML and added the PHP, there was an error. So the solution was it to Update PHP and a lot of people told me the same. Now I did that, and I have an entire different problem.
The page looks like this:
<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* #package WordPress
*/
/**
* Tells WordPress to load the WordPress theme and output it.
*
* #var bool
*/
define( 'WP_USE_THEMES', true );
/** Loads the WordPress Environment and Template */
require __DIR__ . '/wp-blog-header.php';
And I can't even login into WordPress anymore. I'm not sure what to do.
I don't know if the header is the problem or the way I wrote the code, or even maybe something totally different.
HEADER CODE :
<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
<meta charset="<?php bloginfo("charset");?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
wp_head();
?>
</head>
<body>
<!--navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Conesphere Links</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--navbar ende-->
FUNCTIONS CODE:
<?php
/**
*
* TEMPLATE NAME: functions.php
* DESCRIPTION: Add features to wordpress theme
*
*/
function theme_sstyle(){
/**Include style files */
wp_enqueue_style("style", get_template_directory_uri() ."/style.css", array(), "1.0");
wp_enqueue_style("bootstrap","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css", array(), "1.0");
}
add_action('wp_enqueue_scripts', 'theme_sstyle');
function theme_scripts(){
/**Include script files */
wp_enqueue_scripts("bootstrap-bundle-js","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js", array(),"5.2.0",true);
wp_enqueue_scripts("bootstrap-popper","https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js", array(),"5.2.0",true);
wp_enqueue_scripts("bootstrap-js","https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js", array(),"5.2.0",true);
}
add_action('wp_enqueue_scripts', 'theme_scripts')
?>
FRONTPAGE CODE:
<?php
get_header();
?>
<!--hero -->
<div class="main">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/slide3.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!--hero ende -->
<h1>Hello, world! aa</h1>
<p>paragraph </p>
<!--content anfang-->
<div class="container">
<div class="d-flex">
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="container">
<div class="d-flex">
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!--content ende-->
<!--content anfang-->
<div class="card" style="width: 18rem;">
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/key.png" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!--content ende-->
<!--main ende-->
<footer>
Impressum
</footer>
</div>
<?php
get_footer();
?>
Lots of errors:
Use the single quote in PHP.
in function theme_scripts() you used wp_enqueue_scripts but it should be wp_enqueue_script remove extra (s)
theme_scripts & theme_sstyle give proper prefix based names to these functions.
get_stylesheet_directory_uri() if this is your main theme then use get_template_directory_uri()
don't use TEMPLATE NAME: functions.php in functions.php docs tag.
Related
I'm trying to get the carousel that's within a modal to open up on the image that has been selected by the user. I've tried data-slide-to="##" but no look with that. I'll post the code below. I'll remove repeated code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Name LTD - Gallery</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Gallery
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="bg-primary py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Gallery</h1>
<p class="lead mb-5 text-white-50">Below Is A Portfolio Of Just A Few Of The Jobs We Have Done So Far </p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Click An Image To Enter Slideshow</h1>
<hr class="mt-2 mb-5">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="0">
<img class="img-fluid img-thumbnail" src="img/img14.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="1">
<img class="img-fluid img-thumbnail" src="img/img15.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="2">
<img class="img-fluid img-thumbnail" src="img/img9.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="3">
<img class="img-fluid img-thumbnail" src="img/img10.png" alt="">
</a>
</div>
</div>
</div>
<div class="container text-center">
<div class="modal fade imgGal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/img14.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img15.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img9.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img10.png" alt="..." style="width: 100%">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Name 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
So currently when the user selects image 1, image 1 is shown on the carousel but then if image 2 is selected image 1 still shows first etc. So what I want is for the user to be able to select say image 3, and image 3 be selected on the carousel so they don't have to scroll through the carousel to get to it.
You should point your images to the slider also by doing data-target="#carousel-example-generic" where as you are pointing the tag to only modal so that is the reason it is not updating the slider,
So may be the following code helps you
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img14.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="0">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img15.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="1">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img9.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="2">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img10.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="3">
</a>
</div>
</div>
I was making a Dynamic Bootstrap Carousel using PHP. I was watching this and making it: Dynamic BootStrap Carousel
But I got stuck at a place where I am getting a blank page with no error, no source code on inspect element! My code is bit different than the actual link code which is given above.
Here is my code:
<?php
require 'php/dbh.inc.php'; //Database Connection File
$select= 'SELECT*FROM projects;';
$result= mysqli_query($conn, $select);
$count=mysqli_num_rows($result);
if($count<1){
echo "No rows found!";
}
else{
while($row=mysqli_fetch_array($result)){
$rows[]=$row; //Mostly this section is the problem
}
return $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script >
$(function(){
$("#includedContent").load("include.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<div id="home">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
<li data-target="#carouselExampleFade" data-slide-to="3"></li>
<li data-target="#carouselExampleFade" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Menu/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/5.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="about">
<h1 class="about-head">About Me</h1>
<div class="container">
<div class="row" id="textimg">
<div class="col-md-6 col-sm-12">
<img src="Images/sample.png" class="img-fluid">
</div>
<div class="col-md-6 col-sm-12">
<p>
My name is Kabir Jhangiani, I am an aspiring photojournalist. I reside in this busy city Mumbai, where observing people, their events & capturing the most of it those daily lives became my favourite past time. I want to speak a story through a picture that not only shows what it shows but also speaks out my mind. It’s very interesting to observe people, their activities & what’s happening in their surroundings. My interest towards Street photography started getting more intense when I started covering events & cultures from Ganesh Festival to Muharram.
I would like to capture all of these moments on my camera to speak your style of story through my words. Painters express their art through paint, writers through words, I would like to capture the moments through emotions in them.
I am very fond of documenting different festivals, it talks about the history of the festival and the reasons behind it to celebrate.
Photography to me is, creating history, when we live in the future, we can live in the moment while looking at its visuals.
</p>
</div>
</div>
</div>
</div>
<div id="work">
<h1 class="work-head">Work</h1>
<div class="container">
<div id="workCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i=0;
if(count($rows)){
foreach ($rows as $value) {
if($i==0){
echo '<li data-target="#workCarousel" data-slide-to="0" class="active"></li>';
$i++;
}else{
echo '<li data-target="#workCarousel" data-slide-to="0"></li>';
$i++;
}
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$a=0;
if(count($rows)){
foreach ($rows as $value) {
if($a==0){
echo '<div class="carousel-item active">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}else{
echo ' <div class="carousel-item">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}
}
}
?>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#workCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#workCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Mostly according to me the problem is in the while loop section or require line because when i comment that section, my content shows up. Please help!
My code works just fine if it is in html file, the header and footer codes are in the products page. The problem is if I make it in php file, the side navbar won't work, I already tried moving the body tag in the products page but it still doesn't work. Appreciate any help :)
header-ee.php
<html>
<head>
<?php
include('parameters.php');
?>
<title> <?php echo $page_title; ?> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $server_addr ?>/common/css/bootstrap.css">
<script src="<?= $server_addr ?>/common/js/jquery-3.2.1.js"></script>
<script src="<?= $server_addr ?>/common/js/bootstrap.js"></script>
<script src="js/ee-home.js"></script>
<link rel="stylesheet" href="css/ee-home.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<!--Start header-->
<nav class="navbar navbar-default navigation-bar">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-xs-12 col-sm-12 col-md-12 col-lg-6 centered-a">
<div class="row">
<div class="col-sm-3 centered-a">
<img src="img/ee-logo.png">
</div>
<div class="col-sm-9">
<h1 id="nav-brand">
EQUIPMENT ENGINEERS, INC.</br>
</h1>
<h1 id="nav-brand-subtitle">
<small>
Your Reliable Solutions Partner
</small>
</h1>
</div>
</div>
<a href="#">
<span class="link-spanner"></span>
</a>
</div>
<div class="navbar-header col-lg-6 visible-lg centered-a">
<div class="row centered-a" id="nav-box">
<div class="col-lg-2 centered-a">
<a href="#">
<p>Home</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Our Company</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>SCM</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Products</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Inquiries</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a" id="last-item">
<a href="#">
<p">Supplier Accreditation</p>
<span class="link-spanner"></span>
<a>
</div>
</div>
</div>
</div>
<div class="panel-group col-md-12 centered-a hidden-lg">
<div class="panel panel-default">
<div class="panel-heading" >
<h2 class="panel-title centered-a">
<span class="glyphicon glyphicon-triangle-bottom"></span>
<a data-toggle="collapse" href="#collapse1">
<span class="link-spanner"></span>
<a>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
Home
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Our Company
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
SCM
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Products
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Inquiries
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Supplier Accreditation
<span class="link-spanner"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--End header-->
products.php
<?php include("includes/header-ee.php"); ?>
<link rel="stylesheet" href="products.css"></link>
<div class="container-fluid">
<div class="row">
<!--Sidebar-->
<nav class="col-md-3" id="myScrollspy">
<span>Product Lineup</span>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<!--Content-->
<div class="col-md-9">
<div id="section1">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
<div id="section2">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
</div>
</div>
</div>
<?php include("includes/footer-ee.php"); ?>
footer-ee.php
</body>
<footer>
<div class="footer-blk row">
<div style="float: none;text-align: center;">
Home | Terms and Conditions | Privacy Policy
</div>
<div style="float: none;text-align: center;">
</div>
</div>
</footer>
i created the bootstrap modal. the following images are albums cover images
<ul class="list-inline galleryItems">
#foreach($albums as $album)
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to=""><img src="{{ url('src/images/gallery/albums_cover',$album->photo->name) }}"><br>
Caption</a></li>
#endforeach
<!--end of thumbnails-->
and i had created the modal body and footer as follows
<div class="modal fade" id="myModal">
<br><br><br><br>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">
<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active "> <img src="{{ url('src/images/gallery/albums_cover',$first_album->photo->name) }}" alt="item{{ $album->id }}" />
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
#foreach($albums as $album)
#foreach($album->photos as $photo)
<div class="item"> <img src="{{ url("src/images/gallery/album{$album->id}",$photo->name) }}" alt="" />
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
#endforeach
#endforeach
</div>
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
<!--end carousel--></div>
<!--end modal-body--></div>
<div class="modal-footer">
<div class="pull-left">
<small>Photographs by Lorempixel.com</small>
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer--></div>
<!--end modal-content--></div>
<!--end modal-dialoge--></div>
<!--end myModal-->></div>
So, every time i click on any album, it shows me all the photos. i just want to display just the images that belongs to that folder
Thank you in advanced
I want to use foreach loop to make my slider work as example below since am querying my image from database. please how can i achieve this? looking # https://newyork.craigslist.org/search/fua as case study
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<!-- BEGIN PRODUCTS -->
<div class="col-md-3 col-sm-6">
<span class="thumbnail">
<div id="carousel-example-gener" class="carousel slide" data-ride="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/500x400&text=1" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=2" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=3" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=4" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=5" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-gener" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-gener" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6">
<span class="thumbnail">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/500x400&text=1" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=2" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=3" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=4" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=5" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6">
<span class="thumbnail">
<div id="carousel-example-generic3" class="carousel slide" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/500x400&text=1" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=2" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=3" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=4" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=5" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic3" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic3" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6">
<span class="thumbnail">
<div id="carousel-example-generic4" class="carousel slide" data-ride="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/500x400&text=1" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=2" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=3" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=4" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/500x400&text=5" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic4" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic4" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<!-- END PRODUCTS -->
</div>
</div>
</body>
</html>
Below is the foreach loop that am trying to use but it is not giving me the same result. only the first frame is sliding when navigation button is clicked. please help
<!-- BEGIN PRODUCTS -->
<?php
// foreach image.... display image
foreach($images as $image){
?>
<div class="col-md-3 col-sm-6">
<span class="thumbnail">
<?php
echo "<img class='img display_images img-thumbnail' src='../uploads/{$image['image1']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
echo "<img class='img display_images img-thumbnail' src='../uploads/{$image['image2']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
echo "<img class='img display_images img-thumbnail' src='../uploads/{$image['image3']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
echo "<img class='img display_images img-thumbnail' src='../uploads/{$image['image4']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
echo "<img class='img display_images img-thumbnail' src='../uploads/{$image['image5']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
?>
<h4><?php echo $image["company"]; ?></h4>
<p><?php echo $image["description"]; ?> </p>
<p><b>EMAIL:</b> <?php echo $image["email"]; ?></p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<?php
}
?>
<!-- END PRODUCTS -->
First write select query to fetch images from database then loop through images.
foreach($images as $slider_image)
{
<div class="item">
<img src="<?php echo $slider_image; ?>" width="500" height="400" alt="...">
</div>
}
Hope this helps.