I am trying to achieve as shown below in the image.
I want to create a image carousel slider in which I have 4 items having 4 slides each.
This images act like a radio button selection I am getting the list from the database, so I want to highlight which radio button is selected by highlighting the slide which comes as selected.
So whenever the carousel loads it should highlight the slide which is selected as radio input
Simple Carousel
Here is the link of it : https://bootsnipp.com/snippets/featured/simple-carousel
Here is my Code :
<div class="carousel-inner">
<?php
$result = '';
foreach ($template_data as $key => $value) {
if ($key == 0) {
$result .= '<div class="item active">';
}
elseif ($key !=0 && ($key % 4 == 0)) {
//to avoid first empty "active"
$result .= "</div>";
$result .= '<div class="item">';
}
$result .= '<div class="col-md-3"><img src="http://placehold.it/250x250" alt="#" title="#"></div>';
}
$result .= '</div>';
echo $result;
?>
</div>
Your basic premise looks good to me, though an example on jsFiddle or the like highlighting the problem would be much better. For future questions, consider that.
Meanwhile, I might consider reorganizing your code such that there is never ambiguity of when you write the opening and closing element tags. If you open a tag, close it. Always:
<?php
$result = '';
foreach ($template_data as $key => $value) {
$cssClass = 'item';
if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
$cssClass .= ' active';
}
$result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
}
echo $result;
?>
The only if-check necessary should be to determine if the item is active. If so, modify it accordingly. Otherwise, the loop is the same for every item. Much easier to write, read, and reason about later.
Related
I want do something like that - http://imgur.com/kCgH0Jf
I have only function to show 6 posts, but i don't know how do it with content show like a photo.
function six_images_slider() {
$args = array('numberposts' => 18, 'category' => 22);
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
$output = '<div class="slide">';
foreach ($recent_posts as $post) {
$featured_permalink = get_permalink($post['ID']);
$featured_title = get_the_title($post['ID']);
$featured_date = get_the_time('d.m.Y');
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
if ($i == 1) {
$output .= '<div class="col-6 border-l-r">
<big class="white">30</big>
<br /><span class="font-m cream">SIERPIEĊ</span>
</div>';
}
$output .= '';
if ($i == 6) {
$output .= ' </div>';
$i = 0;
}
$i++;
}
$output .= '</div>';
echo $output;
}
I using slick slider to slide next news and more
This is code to whole page:
<section id="wydarzenia" class="page">
<h2>O nas</h2>
<h1>Na Lato Day & Night</h1>
<p>content hover news</p>
<article>
<?php six_image_slider(); ?>
</article>
</section>
Well the link you shared have taken a very different and efficient route. If you look closely, on pressing the next button, the url changes and it takes a sec to load the new page. This means, its not using an image slider and every post has its own comments and description. I dont think its built on wordpress, but if you want to make something like this wordpress, then its much simpler then you expect.
The wordpress way of doing something like this would be as follows.
You need to create a custom post type, and call it something like gallery. Now every post in that gallery will have content area where you can add the images and details about the images, and it will have comments related to that post. Now you can also create categories inside the gallery, and every post will be linked to a gallery. Now when you view a post it will have a next button which will link to the next post from the same category. This way its much more effecient, managable and much much faster :)
I'm looking to replace a select dropdown with images.
My current code for the drop down is
<div class="app_services_dropdown_select">
<select name="app_select_services" class="app_select_services">
<option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
<option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
<input type="button" class="app_services_button" value="Show available times">
</div>
Which is generated by this code:
$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
if ( $services ) {
foreach ( $services as $service ) {
$service_description = '';
// Check if this is the first service, so it would be displayed by default
if ( $service->ID == $appointments->service ) {
$d = '';
$sel = ' selected="selected"';
}
else {
$d = ' style="display:none"';
$sel = '';
}
// Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
}
}
$s .= '</select>';
$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
$s .= '</div>';
$s .= '</div>';
And I really want an image of a car as value 1 and a van as value 2, plus I really want it to submit on click rather than having the button.
Is it possible to replace the dropdown with images instead or would I need to use a radio button, then style it using an image?
You can see my current dropdown in use here
There are various plugins are available which help you to achieve your target. I have googled and found few you can try them
ddslick
Ms Dropdown
Have a link that trigger the apparition of a div with Javascript.
This div will contains the two links images, with the links you want the user to go.
This div also need to be placed relatively with the initial link that trigger it.
If you don't want to program the Dropdown by yourself, you can use libraries like bootstrap or jquery-ui
I need to put content in a jquery slider and for the slider each slide is a <li> element and I have to put a list of products within that slide, but it also must automatically create a new slide when it's full.
Now I've decided that I'm going to put 4 elements in a boundry of 1 slide so after 4 elements, the php loop must create a new slide. How can I do that? It looks somewhat like this:
while($r=mysql_fetch_array($sql)) {
echo "
<li>
$r['title']
<li>";
}
but of course, this code creates a new slide everytime it returns the result, which isn't what I want.
you can try this one
<?php
$count=4;
while($r=mysql_fetch_array($sql)) {
if($count % 4==0)
{
echo "<li>";
}
echo $r['title'];
if($count % 4 ==3)
{
echo "</li>";
}
$count++;
}
?>
Maybe something like this?
$i = 1;
while($r=mysql_fetch_array($sql)) {
if($i%4==0) echo "<li>";
echo $r['title'];
if($i%4==3) echo "</li>";
$i++;
};
I need to preface my question with some history so you know what and who you are dealing with. I am a 75 year old just retired house painter who is building just this one website so that I can sell some of the stuff that I have done for many years as a hobby. I have a decent understanding of HTML and CSS and a lesser knowledge of PHP from browsing the internet. JavaScript knowledge is zilch.
This is an include file for the content in one of the sections of my website. It works fine with just one Mysqli query and no JavaScript, but with a lot of products to list I would like to swap the content so I wouldn't have to add more pages. The JavaScript is borrowed from a tutorial by Adam Khoury and I just plugged in my information to it.
My question is, can I use the LIMIT clause as a mechanism to swap the content of the page as I tried within the code below? At this point I am getting this error.
Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result,
boolean given in C:\wamp\www\elkcreek\includes\cabscontent1.php on line 37.
This line is:
while ($row = mysqli_fetch_assoc($result))
Thanks in advance for any help or just for reading this diatribe.
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
?>
<?php
require "scripts/connect_to_copy.php";
$contentVar = '';
$products = '';
$sql = '';
if (isset($_POST['contentVar'])) {$contentVar = $_POST['contentVar'];}
if ($contentVar == "con1")
{
$sql = mysqli_query($link, "SELECT * FROM cabs ORDER BY id LIMIT 0, 4" );
}
else if ($contentVar == "con2")
{
$sql = mysqli_query($link, "SELECT * FROM cabs ORDER BY id LIMIT 4, 8");
}
else if ($contentVar == "con3")
{
$sql = mysqli_query($link, "SELECT * FROM cabs ORDER BY id LIMIT 8, 12");
}
$result = mysql_query($sql)
while ($row = mysqli_fetch_assoc($result))
{
$pages = $row["pages"];
$left_image = $row["left_image"];
$product_name = $row["product_name"];
$price = $row["price"];
$ordering_number = $row["ordering_number"];
$sold = $row["sold"];
$products .=
'<div class="product">
<div class="product_pictures"><a href="' . $pages . '">
<img src="' . $left_image . '" alt="cabochon" width="150" height="200"/></a>
</div>
<div class="product_name"><h3>' . $product_name . '</h3></div>
<div class="price">$' . $price . '</div>
<div class="order_number">Order# C' . $ordering_number . '</div>
<div class="sold">' . $sold . '</div>
</div>';
}
?>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script>
function swapContent(cv) {
$(".product").html('<img src="loader.gif"/>').show();
var url = "cabscontent1.php?";
$.post(url, {contentVar: cv} ,function(data) {
$(".product").html(data).show();
});
}
</script>
<div class="desc">CLICK ON PICTURES FOR LARGER PICTURES - DESCRIPTIONS
</div>
<div class="more_cabs">MORE CABS
1
2
3
</div>
<div class="product_column"><?php echo $products; ?></div>
I'm trying to work my way through a problem. It's two parts:
I want to create a loop that reads out each of my page's menu_name from the database and on the same line that it reads it out, put a radio button to change the visibility. So far It looks like my radio buttons are all connected because (instead of being checked "no" for each of them it is only checked no on the last <li> item:
//K's function:
function get_all_pages() {
global $connection;
$query = "SELECT *
FROM pages ";
$query .= "WHERE visible = 1 ";
$query .= "ORDER BY position ASC";
$page_set = mysql_query($query, $connection);
confirm_query($page_set);
return $page_set;
}
//K's function:
function list_all_pages(){
$output = "<ul>";
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li>{$page["menu_name"]}</li>";
$output .= " <input type=\"radio\" name=\"visible\" value=\"0\" checked=\"checked\" /> No <input type=\"radio\" name=\"visible\" value=\"1\" /> Yes";
}
$output .= "</ul>";
return $output;
}
I'm trying to do some sort of ajax thing with Javascript.. so I want the visible radio buttons to be next to my dynamically generated menu list. I want them to all be checked to no... when they are checked to yes I want a dropdown list to appear where they can pick the numbers 1-8 (the numbers will mean what position they will appear in).
I am new and trying to figure this out is a little out of my reach without some assistance from Javascript and php/mysql experts.
Your radio buttons all have the same "name" attribute, so you can only select one at a time. You could append some unique identifier to the attribute value. For example, visible_{$page_id}:
function list_all_pages(){
$output = "<ul>";
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$page_id = urlencode($page["id"]);
$output .= "<li>{$page["menu_name"]}</li>";
$output .= " <input type=\"radio\" name=\"visible_{$page_id}\" value=\"0\" checked=\"checked\" /> ";
$output .= "No <input type=\"radio\" name=\"visible_{$page_id}\" value=\"1\" /> Yes";
}
$output .= "</ul>";
return $output;
}
Advanced tip: With PHP you can simplify the processing of "page" data by using specially-formatted input names -- like so:
Let the radio buttons use names like pages[$page_id][visible].
Let the lists (aka select) use a name like pages[$page_id][order].
Once the user submits this data, PHP converts it into a "pages" array (with indices being page_id's). You can then do something like:
function process_pages($pages) {
foreach ($pages as $page_id => $data) {
$is_visible = $data['visible'] === '1';
$page_order = (int) $data['order'];
//... update page's visibility/page order
}
}
$pages = $_REQUEST['pages'];
process_pages($pages);
1. Change the name attribute of each radio button to disconnect them e.g. use visible1, visible2, ...
2. put the <input> tag within <li> after your <a> tag. That will show your radio buttons next to your dynamically generated menu.
3. You can create select list for number by creating and calling a javascript function that will be executed by onclick of Yes options, which will create and show the select fields.
Please comment on the answer if you need more clarification.