I'm creating a gallery in php, where it has a filter divided into categories. But when a word has a space it doesn't show the associated images.
I'm working on two tables, one that creates the categories and the other that is from the gallery.
This is my code and the sql queries:
Querys:
$sql = "selec categoria AS categoria_formatted from cat_lar";
$galerialar = $connect->query($sql);
$sql = "select foto,categoria_lar from galeria_lar,cat_lar Where categoria_lar=categoria";
$galerialarconde = $connect->query($sql);
Code:
<div class="popular page_section">
<div class="container">
<div class="row">
<div align="center">
<button class="filter-button" data-filter="all">All</button>
<?php mysqli_data_seek($galerialar, 0);
while( $galerialarc = $galerialar -> fetch_assoc()){ ?>
<button class="filter-button" data-filter="<?php echo $galerialarc['categoria_formatted']?>"><?php echo $galerialarc['categoria_formatted']?></button>
<?php } ?>
</div>
<br/>
<?php
while( $galerialarc = $galerialarconde -> fetch_assoc()){ ?>
<div class="gallery_product col-sm-3 col-xs-6 filter <?php echo $galerialarc['categoria_lar']?>">
<a class="fancybox" rel="ligthbox" href="admin/galeria/uploads/<?php echo $galerialarc['foto']?>">
<img class="img-responsive" alt="" src="admin/galeria/uploads/<?php echo $galerialarc['foto']?>" width="150px" />
</a>
</div>
<?php }?>
</div>
</div>
</div>
SCRIPT:
<script>
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$('.filter').show('1000');
}
else
{
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
});
/* end gallery */
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
Can they help me? Because I've already tried to put the words with "_" and replace and it remained the same
As you suggest yourself, the image URLs can't contain whitespaces. If you already tried to replace whitespaces with underscores (_) , remember to upload the image files with that name and replace the foto url in the database with the new images.
If it doesn't work, try to investigate where exactly the problem occurs. Is the queries returning the right results (try to var_dump() the result and see if they are missing. If you think the problem happends in the HTML, try using your "inspect" feature in your browser and see if a source URL is provided for the image element and check if this URL really has an image.
Related
Am using a while loop to out various elements each containing rows from a mysql database. I was able to make each div have different id however, i have no idea how i can target each of the divs usings jquery through the ids so that each div is a clickable link.
Here is a part of my code
<!-- php script -->
<?php
require_once 'controllers/fetchVids.php';
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$fileName = $row[$filePath];
$file = basename($fileName);
$mb = round($row[$size] / (1000000), 2);
echo "
<div class='container search-output' id=''>
<div class='row song-info' id='file-$row[$videoId]'>
<div class= 'col col-sm-6 artist'>
$file
</div>
<div class= 'col col-sm-3 song-title'>
<span>Size:</span>
$mb mb
</div>
<div class= 'col col-sm-3 song-title'>
<span>Downloads:</span>
$row[$downloads]
</div>
</div>
<div class='row-lower'>
<a href='#' class='icon all-links'>
<i class='fa fa-whatsapp'></i> Share
</a>
<i class='fa fa-clock duration'></i> Duration $row[$duration] mins
</div>
</div>
";
} else {
echo "No New Videos";
}
mysqli_close($connection);
?>
Someone please show me the right jquery to do the above. thank you
Below is the jquery code i tried but it rather opens all the divs and not only that that a user clicks on
$(document).on('click', '.song-info', function() {
// alert(this.id);
if (this.id) {
window.location = "./song-details.php";
}
});
I think you were going wrong by using the 'this' keyword - you may have wanted to use $(this) instead, which is a keyword in jQuery that gives the DOM node you are currently working on access to jQuery methods (at least as far as I understand it!)
You can use $(this).attr('attribute name') (another jQuery method) to get the 'id' property of the div you clicked and use it within your function.
There are more than a few ways to do this, as mentioned in the comments, but here is how I would go about it. I'm assuming you want to send the fileId in a query string to './song-details.php'.
$(document).on('click', '.song-info', function() {
let id = $(this).attr('id').split('-').pop()
if (id) {
window.location = "./song-details.php" + "?id=" + id
}
})
I've been assigned with continuing to work on a WP-theme someone else has set up and I am still running into some problems, being very new to Wordpress.
I believe, one thing the person who worked on this before me did, is set up buttons at the top of the page which allow for sorting or restricting the posts displayed according to their respective categories. This is exactly what the user should be able to do, but it is not working yet and I'm having trouble understanding how to use the code my former colleague did write for this. This is the markup for the display of the site's posts, the script at the bottom is what I think is supposed to enable the filtering of the posts:
<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">
<div class="button-group filters-button-group">
<button class="active btn" id="all">alle</button>
<button class="projekt-btn" id="category-wise-201516">WiSe15/16</button>
<button class="projekt-btn" id="category-sose-15">SoSe15</button>
<button class="projekt-btn" id="category-wise-201415">WiSe14/15</button>
<button class="projekt-btn" id="category-sose-14">SoSe14</button>
</div>
<?php if (is_home()) {
query_posts("cat=-3");
} ?>
<?php if (have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div <?php post_class(); ?>>
<p><?php the_title(); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} ?>
</a>
<!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Couldn’t find any articles!</h2>
<?php endif; ?>
</div>
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
<?php get_footer(); ?>
It be incredibly helpful if someone could explain this to me and also help me with getting it to work. I'm definitely new to WP, php and JS but would really like to get a grasp on it. And of course get the site to work properly.
EDIT
Here's the javascript at the bottom of the page as a separate piece of code:
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
As far as I can tell there is no other JS linked to the page or executed in regards to the filter buttons. Here's also a link to the current version of the website which the code posted in my question is taken from: http://udkdev.skopec.de/category/projekte/
Actually, the javascript binds the click event on elements with class "btn" but only your "all" button has that class. So it looks as if it does nothing.
Either change the buttons class, or the click target.
I'm working on a WP code, but my problem in specific to JS. So I post my question here at StackOverflow.
Final goal is, clicking on the post image, showing the HTML markup of large img on Console. Here's my code:
<div class="img lightbox-trigger">
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
<?php $large_thumb = get_the_post_thumbnail($post->ID, 'large') ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
var largeThumb = <?php echo json_encode( $large_thumb ); ?>;
console.log( largeThumb );
});
});
</script>
The problem is when I click on one of the post's images, the largeThumb value of all other posts (there are 10 posts) printed on Console!
I don't know how to use $(this) in this specific context to just get the value related to the element being clicked on.
Any help is appreciated.
You could use data-* attributes to store the $large_thumb of every lightbox-trigger in the related div :
<div class="img lightbox-trigger" data-large-thumb='<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>'>
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
Then in the js you could get this info :
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
console.log( $(this).data('large-thumb') );
console.log( $(this).html() );
});
});
Hope this helps.
I'm working to create a classifieds site. On the search page will be presented multiple products cards. Each product card can have more than one image. When that happens, I will uses a slider.
To build this slider, I'm using a jquery library (bxslider). The application is based on WordPress.
So far, everything was going well. Cards and slider working. But when I have more than one card (post), the slider controls change the position on all cards. Of course, since the selector is the same for everyone.
Then I added the post ID to the ID selector, making every single card. But now must do jQuery understand that there are several unique cards for him to apply the function that creates the slides within each card.
My PHP Code
<?php
$id = get_the_ID();
?>
<div id="card-slider-<?php echo $id?>">
<?php
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<li>
<div class="card-slide-item">
<img src="<?php echo wp_get_attachment_url( $image, 'imob-thumbs' ); ?>">
</div>
</li>
<?php }
?>
</div>
<div class="card-slide-prev"></div>
<div class="card-slide-next"></div>
My jQuery
(function( $ ){
$.fn.sliderID = function() {
var sliders = [];
sliders = $('[idˆ=card-slider-]').length;
console.log('sliders ids', sliders);
};
})( jQuery );
$(document).ready(function(){
$.fn.sliderID();
});
Instead of giving each slider an individual id card-slider-{id}, consider to give them all a common class card-slider and initiate the slider plugin on all elements that have that class. You can pass along the ids of the prev/next selectors (which you can e.g. store in a data attribute) in the initialization arguments of the slider:
Slider initiation
$( ".card-slider" ).each(function( index ) {
var slider_id = $(this).data('id');
$( this ).bxSlider({
nextSelector: '#card-slide-'+slider_id+'-next',
prevSelector: '#card-slide-'+slider_id+'-prev',
});
});
Markup:
<?php
$id = get_the_ID();
?>
<div class="card-slider" data-id="<?php echo $id; ?>">
<?php
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<li>
<div class="card-slide-item">
<img src="<?php echo wp_get_attachment_url( $image, 'imob-thumbs' ); ?>">
</div>
</li>
<?php }
?>
</div>
<div id="card-slide-<?php echo $id; ?>-prev"></div>
<div id="card-slide-<?php echo $id; ?>-next"></div>
I have a article with content, and I also have a link to a div, to open a fancybox with that div content, like this:
<p>Content of the news<a class="fancybox" href="#show">See more</a></p>
Now I wanted to pass my div #show where I have the content that will appear in fancybox, I wanted to pass this to class like class = "show" and not id = "show" like I have.
But, when Im trying this the fancybox dont open like this:
<p>Content of the news<a class="fancybox" href=".show">See more</a></p>
<div class="show">
This is my full html:
<article id="loop-news">
<h2>
Title of the News
</h2>
<span>Date of the news</span>
<p>Content of the news<a class="fancybox" href="#show">See more</a></p>
<div id="show-container">
<div id="show">
<h2>Title of the news</h2>
<span>Date of the news</span>
<img src="images/image1.jpg" /> <br />
<p>Content of the news</p>
</div>
</div>
</article>
My script jQuery:
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
fitToView : false,
width : '80%',
height : '80%',
autoSize : false,
closeClick : false,
});
})
My php:
while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC))
echo '<article id="loop-news">';
echo '<h2>';
echo '<a href="#show" class="x" >'.$readNewsResult ['title'].'</a><br />';
echo '</h2>';
echo '<p>'.$readNewsResult ['content'].'<a class="fancybox" href="#show.'.$countitems++.'">See more</a></p>';
echo '<div id="show-container">';
echo '<div id="show.'.$countitems++.'">';
echo '<h2>'.$readNewsResult ['title'].'</h2>';
echo '<p>'.$readNewsResult ['content'].'</p>';
echo '</div>';
echo '</div>';
echo '</article>';
}
Do you know why the fancybox dont open if I use class?
In case you are really desperate you can always convert the class="" attribute to an id.
It is ugly and probably useless, but if you cannot change the html and cannot hack fancybox, you can
$(".show").first(function() {$(this).attr("id","show");});
Untested code, but should work, to convert the class to an id (keeps the class, adds the id)
Then $("#show").whateverYouWant..
More generic:
function addSameIdToClass(aClass) {
$("."+aClass).first(function() {$(this).attr("id",aClass);});
}
addSameIdToClass("show");
This of course will work pnly with first class=".show" item
EDIT This seems more a PHP related question ..
I am not sure it is a good idea to have multiple class="show" items, I guess the idea of fancybox it to have one show item for many images, just put it out of the PHP loop.
If you have one show item only you can use the id, don't bother with the classes.
In case you really need more, you have to use different ids in your PHP loop:
$Count=0;
foreach($something as $someItem) {
...
echo('<div id="show'.$Count.'">');
...
}
then inside the loop you refer to that "show" item as "#show0", "#show1", etc..:
$showId='#show'.$Count;
echo('<a ... href="'.$showId.'"');
etc..
EDIT 2 Cleaned a bit your PHP:
$countitems=0; // must init to avoid notices
while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC)) {
$countitems++; // safer to do it here (at start or at end of loop)
echo '<article id="loop-news'.$countitems.'" class="loop-news">';
echo '<h2>';
echo '<a href="#show" class="x show" >'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</a><br />';
echo '</h2>';
echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'<a class="fancybox" href="#show.'.$countitems.'">See more</a></p>';
echo '<div id="show-container'.$countitems.'">';
echo '<div id="show.'.$countitems.'" class="show">';
echo '<h2>'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</h2>';
echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'</p>';
echo '</div>';
echo '</div>';
echo '</article>';
}
by the way you should include $readNewsResult ['content'] and the others into an htmlentities call
htmlentities($readNewsResult['content'],ENT_COMPAT,'UTF-8')
(if UTF-8) just in case there is some < char in the database.