How can I make a content slider, like the popular product sliders shown on most websites (Flipkart, Amazon), which scroll left and right on button click, similar to this image:
I have only four contents showing, but I want to add some more, and I want it to slide on button click. Sorry, I dont know the exact term for it.
These content values would be dynamic.
<div class="dialog">
<div class="shop_img">
<img src="../image/shops/1.jpg">
</div>
<hr id="hr">
<div class="shop_name">
<?php echo $name;?>
</div>
<a href="detail.php?add=<?php echo $add_id;?>"><div class="address">
<span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
</div></a>
</div>
This is called carousel.
You can use a javascript plugin called owl carousel from here http://www.owlcarousel.owlgraphic.com/ to achieve that effect.
You can use php foreach loop to dynamically generate your carousel items inside carousel container like below:
<?php
foreach ($items as $key => $item) {
ob_start();
?>
<div class="dialog">
<div class="shop_img">
<img src="../image/shops/<?php echo $item->imageName;?>">
</div>
<hr id="hr">
<div class="shop_name">
<?php echo $item->name;?>
</div>
<a href="detail.php?add=<?php echo $item->id;?>"><div class="address">
<span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
</div></a>
</div>
<?php
$itemHtml = ob_get_clean();
print $itemHtml;
}
?>
Related
I was making this shopping site as a test, but have come across a problem when trying to change the banners at the tops of the page based on the category the user is viewing
This is for a site being run off a seerver on my localhost, not wordpress btw
<div class="item">
<div class="image">
<img src="assets/images/banners/cat-banner-1.jpg" alt="" class="img-responsive">
</div>
<div class="container-fluid">
<div class="caption vertical-top text-left">
<div class="big-text">
<br />
</div>
<?php $sql=mysqli_query($con,"select categoryName from category where id='$cid'");
while($row=mysqli_fetch_array($sql))
{
?>
<div class="excerpt hidden-sm hidden-md">
<?php echo htmlentities($row['categoryName']);?>
</div>
<?php } ?>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
I tried using PHP to make the banner section responsive like so:
<div class="image">
<?php if (is_category( 'Entertainment' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/><?php endif;?>
<?php if (is_category( 'Science' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/><?php endif;?>
<?php if (is_category( 'Lifestyle' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/><?php endif;?>
</div>
I realize this was a sloppy way to do it, but was all I could come up with and it still did not work.
What would I have to do to the PHP in order to make the site change banner images for different categories? Is there a way I could also do it perhaps without using PHP?
php
<?php
if $is_category == 'Entertainment' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/>
}else if{ $is_category =='Science' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/>
}else{ $is_category =='Lifestyle' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/>
}
?>
css
.round_corners {
some format
}
.hover-shadow {
some format
}
html
echo $is_category
I wrote a while loop were it displays the picture that I have kept and I want when the user presses the button in the picture to popup a modal with the picture in it. This is the code that i wrote to display the products and when he presses the button then "onclick" it sets a session were I store the image of the picture and I display on the modal but that does not work. It only takes the last picture that is displayed. How do I make it to display the picture that I select?
<?php
$query_name="SELECT * FROM products WHERE active='1' ";
$result = mysqli_query($conn, $query_name);
while($rows=mysqli_fetch_assoc($result))
{
?>
<div class="block2">
<div class="block2-pic hov-img0">
<img src="img/<?php echo $rows['picture']; ?> " alt="">
<button href="#" onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</button>
</div>
</div>
<?php } ?>
This is the modal
<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
<div class="overlay-modal1 js-hide-modal1"></div>
<div class="container">
<div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
<button class="how-pos3 hov3 trans-04 js-hide-modal1">
<img src="images/icons/icon-close.png" alt="CLOSE">
</button>
<div class="row">
<div class="col-md-6 col-lg-7 p-b-30">
<div class="p-l-25 p-r-30 p-lr-0-lg">
<div class="wrap-slick3 flex-sb flex-w">
<div class="wrap-slick3-dots"></div>
<div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
<div class="slick3 gallery-lb">
<div class="item-slick3" data-thumb="images/product-detail-01.jpg">
<div class="wrap-pic-w pos-relative">
<img src="img/<?php echo $_SESSION['what_picture']; ?>" alt="IMG-PRODUCT">
<a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/product-detail-01.jpg">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to do ajax for targeted element and show in model
The mistake you're making here is in this link
onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>"
The problem here is, in the onclick attribute you are not calling any JavaScript function. What you need to fix this is, call a function with the $rows['picture'] as a parameter to it.
E.g.
onclick="setModelPicture(<?php echo $rows['picture']; ?>)"
In addition to that, you need to do 2 things.
Give an "id" to the image that we want to target
img id="dynamic-model-picture" alt="IMG-PRODUCT"
Need to define the following JavaScript function to set the image inside the model to what you're passing in to the function setModelPicture.
function setModelPicture(picture){
document.getElementById("dynamic-model-picture").src = picture;
}
In the above scenario, whenever the user clicks on the image, the path of the picture (I believe is in $rows['picture']) get passed in to the setModelPicture function and from there it updates the image src attribute.
I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
I have a DIV that expands on click, it currently closes when another DIV is clicked but I would also like it to close on click, my code is below:
The Jquery:
$(function(){
$('.opReview').click(function(){
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
});
});
The HTML Markup (Wordpress code can be ignored)
<article class="sixteen columns opReview">
<img class="opLogo" src="<?php bloginfo('stylesheet_directory'); ?>/img/core/operator/90x58_operatorlogo/<?php echo $op_logo?>.png" alt="<?php echo($op_title)?>" >
<div class="list_details">
<div class="reviewTitle"><p>Click To </br> Read a review</p> </div>
</div>
<button class="claimBtn"><i class="fa fa-chevron-circle-right fa-rotate-90"></i></button>
<div class="clear"></div>
<div class="review hide">
<h1><?php echo $op_name; ?></h1>
<p><?php echo $operator_review; ?></p>
</div>
</article>
This code hides all .review elements and then toggles the active one, unhiding it
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
you need to do exclude the current item from the first selector
$(this).siblings('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.
<div class="main">
<div class="main_slider">
<div id="bg"> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
<div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
<!--<div id="img_title"></div>-->
<div id="toolbar"> <img src="images/toolbar_fs_icon.png" width="50" height="50" /> </div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php
include("connect.php");
$s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
while($row=mysql_fetch_array($s))
{
$img=$row["image"];
//$image= "<img src=\"images/gallery/$img\" width=200 height=120>";
echo "<div class=content_img>";
echo "<div> <img src=\"images/gallery/$img\" height=138 width=238 alt=image class=thumb style=opacity:0.6;/> </div>";
echo " </div> ";
}
?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.
You can clean up your code like this:
// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
// Main HTML part
?>
<div class="main">
<div class="main_slider">
<div id="bg">
<img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
</div>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" />
</div>
<div id="toolbar">
<a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" /></a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php foreach ($images as $image) { ?>
<div class="content_img">
<div>
<a href="images/gallery/<?= $image; ?>">
<img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.
Even more, now you can test where the problem is by doing something like this:
$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
echo "Load time: " . (microtime(true) - $start) . "<br>";
In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.
Try
Jpeg images instead of png
Save images with option "Save image for web"
You can use RIOT image optimisation tool
For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.
Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS
I think you should try to store images on disk and check if images load faster from hard drive .