I'm pretty new to Jquery and writing a gallery with multiple pages and I have a problem with the Jquery selector.
I'm trying to select a img tag and a a tag, both tags have different class names and are in a .portfolio-item class.
What I've tried is
var countImages = $(".portfolio-item a img").length;
console.log(countImages);
var perPage = 8;
$('.image, .edit-post-link').css('display', 'none');
//$('.post-edit-link').css('display', 'none');
//$('.slider').children().slice(0, perPage).css('display', 'block');
$('.image, .edit-post-link').slice(0, perPage).fadeIn("fast");
//$('.post-edit-link').slice(0, perPage).fadeIn("fast");
function goTo(pageNumb){
var startFrom = pageNumb * perPage;
var endOn = startFrom + perPage;
//$('.post-edit-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
$('.image, .edit-post-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
}
var buttons = countImages/perPage;
console.log(buttons);
for (var i = 0; i < buttons; i++) {
var number = i + 1;
$(".pagination").append("<li><a class='navigation-number'>"+number+"</a></li>");
//console.log(number);
};
$('.navigation-number').on('click', function() {
var pageNumber = $(this).text();
goTo(pageNumber -1);
});
this only results in 4 images on each page, but I wanted 8 on one page
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="portfolio-item">
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('medium', array('class' => 'img-responsive image')); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div class="edit-post-link">
<?php edit_post_link(); ?>
</div>
</div>
Edit 3:
<div class="col-md-3 portfolio-item">
<!-- post thumbnail -->
<a href="http://www.q-mediaspot.nl/blog/cinema-4d/cinema-4d-vaas/" title="Cinema 4d Vaas" style="display: none;">
<img src="http://www.q-mediaspot.nl/blog/wp-content/uploads/2016/03/placeholder1-250x150.jpg" class="img-responsive image wp-post-image" alt="placeholder1"> </a>
<!-- /post thumbnail -->
<div class="edit-post-link">
<a class="post-edit-link" href="http://www.mywebsite.nl/blog/wp-admin/post.php?post=4&action=edit">Edit This</a>
</div>
This
$('.portfolio-item').children('a, img')
var $els = $("img.className, a.otherClassName");
This:
$(".portfolio-item a img")
Will select img elements which are inside of a elements which are inside of any element with the portfolio-item class.
It sounds like you want to select a and img elements which themselves have that class. Which would be something like this:
$("a.portfolio-item, img.portfolio-item")
Or, to break it down descriptively (not an actual selector in this case):
$("[tag].[class of that tag], [another tag].[class of that tag]")
Any tag, any class, however you want to define it. Specifically note that there is no space between the tag and the class in this selector. That's because with a space it means "the second part as a child of the first part" whereas without a space it means "the second part as a modifier of the first part".
Edit: Or, perhaps I misunderstood. Do you mean that the a and img tags are themselves descendants of some other element of the portfolio-item class? In that case, it would be more like this:
$(".portfolio-item a, .portfolio-item img")
That is, "all a elements which are inside any .portfolio-item element, and all img elements which are inside any .portfolio-item element".
Related
I'm trying to loop a piece of jQuery code inside a foreach loop. Each article in the loop have a phone number custom post type related (ACF). At this point the loop works well.
As you see, the jQuery code only replace an image to another while user clicks in order to show the number (Ex : "Display Phone Number" image, becomes "555-555-1234").
The problem is that when I click in any image to display number...all articles show their phone number at the same time. I think is an ID problem in my jQuery code. After two days of searching and testing different codes this problem still not resolved yet.
Any suggestions/tracks will be very welcome !
Thanks
====
Things I have tried :
I have tried to put the jQuery code outside the foreach (same result)
I have tried to change the id image into a class (works better)
I have tried different jQuery functions (replaceWith(), show(), etc)
foreach ($related_posts_articles as $related_post ){
<div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">
<div>
<a href="<?php echo get_permalink($related_post->ID); ?> ">
<?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>
</a>
<div>
<a href="<?php echo get_permalink($related_post->ID); ?>">
<h2>
<?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
</h2>
</a>
<div>
<?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>
</div>
<!-- START bloc number -->
<?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
<div>
<img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
<script>
jQuery(document).ready(function($) {
$( ".input_img" ).click(function() {
$( ".input_img" ).attr( "src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
</script>
</div>
<?php endif; ?>
<!-- END bloc number -->
</div>
</div>
</div>
}
Take note of the 'this' Context
When an event fires in jquery the callback function this context is set to the element which the event was fired from.
jQuery(document).ready(function($) {
$(".input_img").click(function() {
// Use `this` to target the event element
$(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
Advice:
You shouldn't generate same jquery code inside each iteration of the for each. Since you're repeating unnecessary code. You can harness HTML data-* attributes to achieve the outcome you seek.
You are giving the class name the same for all images. Also by looping you are adding lot's of scripts. You can add Onclick events to image and create a function and grab the data and do you things. Also, you can add extra attributes to img tag to get your data. Also try to put different ID like below,
foreach ($related_posts_articles as $key=>$related_post ){
<img id="img-<?php echo $key; ?>" onclick="myFunction(this)" class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
}
I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">
We have a slider, we want to use. Dead simple stuff. But I need it to become a little more dynamic.
We have a blog roll, which runs and displays on a php loop, basically.. if we set the loop to 6.. it generates 6 sets of divs.
Now my thought is, put the DIV which displays the blog post within a slider, then we can display subsequent posts as each div refreshes.. kinda thing.. I am sure you know what I mean.
I have made a simple fiddle...
http://jsfiddle.net/ozzy/yEB4V/
Essentially, we only need ONE <li> to </li>
Reason is, we can plonk our php around the LI tags so that the loop works, and the slides get updated accordingly..
The issue I have is, the first time the LI is fired, it must not have display:none , for obvious reasons.. all the otehr subsequent occurences of the LI tags are hidden.
As you can see from the fiddle, all the LI tags have display none, apart from the first LI tag, so it shows that first, then loops to next and each one is updated.
script here;
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
};
var interval = setInterval(slider, 2000);
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 2000);
});
I wonder if anyone knows how to get around this... As our php code will be something like:
<ul id="testimonials">
<!-- OUR PHP LOOP-->
<li class="slide">
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<!-- // PHP LOOP -->
</ul>
You could use jquery to make the first child visible.
$(document).ready(function(){
$('#testimonials :first-child.slide').show(0);
//.. rest of the stuff
});
And in the php, set all the divs to display:none
use:
<ul id="testimonials">
<?php foreach($lis as $li) { ?>
<li class="slide"<?php if($li == $lis[0]) echo ' style="display:list-item;"' ?>>
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<?php } ?>
</ul>
I am trying to make prev - next sliding between content on a page. I have the following markup:
<div class="right">
Previous
Next
</div>
<?php foreach ($chapters as $chapter) : ?>
<div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
<div class="left">
<h1 class="hmc"><?php echo $chapter->title; ?></h1>
</div>
<ul class="attachments scroll-pane">
<?php foreach ($chapter->files as $file) : ?>
<!--video zone-->
<?php if ($file->extension == '.mpeg') : ?>
<li class="wide">
<img src="" />
<span class="duration hmc"><?php $file->duration; ?></span>
<h1 class="hmc">The title is a title</h1>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
Basically I generate some content dynamically with PHP. I have wrapped each content generated in a div and I do not display it only with jQuery.
Now I tried doing something like:
$('body').on('click', 'a#next-button', function(){
$('#chapters-container-').next();
});
but ofc it is not working as I want it. How can I make the content change when i toggle between prev and next button based on the markup I am generating.
I think that you don't get what
$('#chapters-container-').next();
does. This, according to the documentation,
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
so you are just selecting the next element after the element with id = chapters-container-
Youy should do something like:
$('body').on('click', 'a#next-button', function(){
var visisbleContainer = $('div[id^=chapters-container-]:visible');
visisbleContainer.next().show();
visisbleContainer.hide();
});
when user clicks on next button get the visible div( chapter ) id attribute.You would receive the chapter id add 1 to this chapter id and generate another string such as chapters-container-2.
Now hide the current div and show the div of the generated string i.e $('#'+ newstring).show()
I have this code:
$.getJSON("Featured/getEvents",
function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text("Text");
if ( i == 4 ) return false;
});
});
I am doing this in conjuction with a php loop to render a div 5 times, I want to place my content into the ID's from the JSON using var and the .text(), but it is not working, How do I get a var, in this case title into the jquery text() so it can place it in the corresponding div?
This is the corresponding php(partial) that this connects to:
<?php for($i = 0; $i <= 4; $i++)
{ ?>
<div id="event-item-<?= $i?>" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
This is the rendered version:
<div id="event-item-0" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
<div class="inner-left">
<img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
<p class="author">Posted by: <br> Brendan M. (22 Events)</p>
</div>
<div class="inner-middle">
<p class="description" id="description-0"></p>
<p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
<p class="links">
<!-- AddThis Button BEGIN -->
<img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"></script>
<!-- AddThis Button END -->
View Event</p>
</div>
</div>
<div class="column-right">
<ul id="event-options">
<li class="total-attending"><span>502Attending</span></li>
<li class="rsvp"><span>RSVP</span></li>
<li id="like" class="notlike"><span>(3) Likes <br><span class="message">Do You Like it?</span></span></li>
<li class="comment"><span>Comments (200)</span></li>
<li class="location"><span>Location Name</span></li>
</ul>
</div>
</div>
...
</div>
It should be as simple as referencing the variable.
$("#title-"+i).text( title );
or, if your title includes mark up,
$("#title-"+i).html( title );
If this doesn't work, make sure that you aren't getting any javascript errors that prevent the code from running.
EDIT: This may or may not be related, but I would avoid using event as a variable name. Too easy to confuse with the window.event object and it may cause other problems. Generally, I'd use evt in this case.
Other possibilities: You aren't running the getJSON method after the document is done loading or the method isn't relative to the current page. If the simple things don't seem to be getting you anywhere, you may try using Firefox/Firebug to step through the code and see what it is doing. My simple example with your mark up and just using jQuery to set the text of the anchor worked fine so I don't think the problem is in the code where the text is being set.
$(function() {
$.getJSON("/Featured/getEvents",
function(data){
$.each(data.events, function(i,evt){
var title = evt.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});
});
You want to use .html(val).
Edit: Actually, .text(val) will place the text inside the element as-is. Using .html(val) will let any HTML you are adding render appropriately.
Did you try this, using title instead of "Text"?
$.getJSON("Featured/getEvents", function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});