I'm trying to show content from a gallery in a #showcontent div. Currently i have this set up
The Js
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>
index.php
<?php
$args = array('post_type' => 'Gallery', 'order' => ASC);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post($post_id);
echo '<div class="gallery-item">';
echo '<div class="gallery-image">';
the_content();
echo '</div>';
echo '<div class="show-gallery-content">';
echo '<div class="gallery-title">';
the_title();
echo '</div>';
echo '<div class="gallery-excerpt">';
the_excerpt();
echo '</div>';
echo '</div>';
echo '</div>';
endwhile;
?>
CSS
.show-gallery-content {
display:none;
}
Live preview of current website -> http://erwin.my89.nl/stage/sieh/
So, when I click an image i want to get the_title() & the_excerpt to show in #showcontent.
I had it fine last night but PhpStorm kinda screwed it up this morning, so i'm really frustrated now :D.
Thanks in advance!
Also i'd like some background information since I'm a student :-)!
Try this:
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$("#showcontent").append($(".show-gallery-content").html()).show();
});
});
</script>
I think your approach for linking photo to content is not optimized solution. anyway, based on your html structure you need a connection between clicked image to content. you can try this snippet.
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(this).children(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>
Please, consider this snippet:
$('.gallery-item').on('click', function(e) {
$('#showcontent').empty().append($(this).find('.show-gallery-content').contents().clone());
});
Related
So what I'm trying to do is the following:
first: When the button add-location is clicked this loads a php file using AJAX.
jQuery
$('.add-location').click(function() {
var locationName = $(this).data('location');
$.post('http://www.example.com/reload-location-2.php?addparam',
{locationName: locationName}, function(data) {
$("textarea#location").html(data);
})
});
PHP FILE
<?php start_session();
$locationName = array_key_exists('locationName',
$_POST) ? (string) $_POST['locationName'] : '';
if(isset($_GET['delparam'])){
unset($_SESSION['locations'][$locationName]);
}
if(isset($_GET['addparam'])){
$_SESSION['locations'][$locationName] = $locationName;
}
?>
<?php foreach ($_SESSION['locations'] as $location): ?>
<?php echo htmlspecialchars($location); echo "\n"; ?>
<?php endforeach;?>
This all works like a charm! No worries here. No what I'm trying to do is when the button add-location is clicked this echo's the following code to a div called textarea#thema.
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
OR, if that's easier when the page is loaded -> echo that code to the textarea#thema div.
I do not understand AJAX that much but I'm getting there. But I think the last option maybe the easiest solution?
Could anyone help me figure this one out?
What I tried
Right now, When the button add-location is clicked I reload a previous jQuery script:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://example.com/reload-2.php?addparam',
{productName: productName}, function(data) {
$("textarea#thema").html(data);
})
});
This works, but it adds an extra <p>-tag leaving me with a line break in the code.
I also changed the .html(data); to .val(data); for the textareas. Also I made a new PHP file with just this code:
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
And this jQuery code:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://www.example.com/reload-3.php',
{productName: productName}, function(data) {
$("textarea#thema").val(data);
})
});
But still no go... And I don't think this is the way to go?? I hope I gave enough information.
You should use .val() function to fill textarea, not .html().
I have a MySQL output-script on my website:
$db_projects = "rex_projects";
$sql = new rex_sql;
$sql->debugsql = 0; //Ausgabe Query
$sql->setQuery("SELECT * FROM $db_projects ORDER BY id");
for($i=0; $i < $sql->getRows(); $i++)
{
$id = $sql->getValue("id");
$projectname = $sql->getValue("projectname");
$projectnumber = $sql->getValue("projectnumber");
$print_projects .= '<div id="'.$id.'">'.$projectname.' has the number '.$projectnumber.'';
$sql->next();
}
Every database-element is displayed in a div with the formatting above.
What I would like to implement:
If I'm hovering a div, another div (code below) should display the specific datasets for this element. Is this possible and which is the easiest to do that?
<div id="specific-informations">
Projectname: <?php echo $projectname ?><br>
Projectnumber: <?php echo $projectnumber ?>
</div>
Try Adding below Script:
$(document).ready(function(){$( "#specific-informations" ).hide();
});
$( "#getinfo" ).mouseover(function() {
$( "#specific-informations" ).fadeIn(2000);
});
$( "#getinfo" ).mouseout(function() {
$( "#specific-informations" ).fadeOut(2000);
});
Working Demo
You can do something like :
Create your second div in $print_projects
$print_projects .= <<<HTML
<div id="$id" class="project">
$projectname has the number $projectnumber
<div class="specific-informations">
Projectname: $projectname<br>
Projectnumber: $projectnumber
</div>
</div>
HTML;
And in your CSS
.specific-informations { display: none; }
.project:hover .specific-informations { display: block }
You can call an ajax function and return the results.Then bind the corresponding ajax data in div.
I am using simple-gallery.js (found here: alexkalicki.com/jquery-simple-gallery/) and it is only half-way working for me. The script seems to be pulling in the photos per the jQuery initiation code, but clicking on the thumbnails does not replace the large photo (.project-image) the way it is suppose to. I have gotten the same plugin working before, I assume there must be some kind of javascript conflict or a dumb coding mistake I can't see. Any help would be much appreciated.
The test site is here: joshofsorts.com/projects/dsenergy/#commercial. If you click on one of the photos under the "Portfolio" heading, it will reveal the gallery in question.
Here is my js that is dynamically creating the initiation jQuery line for each gallery and inserting it into the footer:
var newjava = "<scr"+"ipt type='text/javascript'>";
newjava += "jQuery(document).ready(function($) {";
$('[id$=-project-gallery]').each(function() {
var the_id = this.id;
newjava += "$('#" + the_id + " .project-image').gallery({source:'#" + the_id + " .project-thumbnails img'});";
});
newjava += "});";
newjava += "</scr"+"ipt>";
$('#newjava').replaceWith(newjava);
And here is the html/php:
<div id="<?php echo $solution; ?><?php echo $item; ?>-project-gallery">
<div class="project-image"></div>
<div class="project-thumbnails"
<?php if($image_count == 1){echo ' style="display:none"';} ?>>
<?php $fourmax=0;
foreach ($images as $image){
if($fourmax==4) break;
echo '<img src='.$image['sizes']['project-image'].'>';
$fourmax++;
} ?>
</div>
</div>
I can't figure out how to make the title change upon scrolling inside the id="titlescroll" div, which surrounds the entire post, and then only outputs the text from the class="title output".
I have styled each post (in this case advanced custom field) within a div with id="titlescroll" and have placed the_title() inside a div with class="titleoutput".
With javascript found at http://jsfiddle.net/Nsubt/ I can make the title change, when I scroll past the class="titleoutput" div, but then I have the problem that it only changes when I scroll past the top of the post where the php code for the_title() sits. This causes problems when I scroll upwards.
I really appreciate any help I can get. Thanks!
PHP code
<?php
$query = new WP_Query( 'category_name=news');
// The Loop
if ( $query->have_posts() ) {
echo '<div class="content-area">';
while ( $query->have_posts() ) {
$query->the_post();
$postid = get_the_ID();
echo '<section class="space" id=';
echo $postid;
echo '>';
echo '</section>';
echo '<div id="titlescroll">';
echo '<div class="titleoutput">';
the_title();
echo '</div>';
$fields = get_fields();
if (get_field('one_column_images')){
echo '<div class="entry-content">';
the_field('one_column_images');
echo '<div class="onetext">';
the_field('one_column_text');
echo '</div>';
echo '</div>';
echo '</div>';
}
Javascript
jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('#titlescroll').each(function(){
if(pos.top >= $(this).offset().top && pos.top<= $(this).next().offset().top)
{
var $this = $(this);
$('#entry-title').html($this.child('.titleoutput').html()); //or any other way you want to get the date
return; //break the loop
}
});
});
});
Problem solved. I tried a million things and one of them worked. Hurrah!
Javascript
jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('.titleoutput').each(function(){
var box = $('#titlescroll').offset();
if(pos.top >= $(this).offset().top && box.top <= $(this).next().offset().top)
{
$('#entry-title').html($(this).html());
return; //break the loop
}
});
});
});
I'm having trouble with Jquery and flickering. My problem is this, when I convert my id's to classes the below syntax isn't working. The problem is, it flickers. It flickers approx. 7-8 times. What am I doing wrong? Any help would be appreciated. Thanks everyone.
I would also like to add when I change my classes to ID's everything works great but only one item on my webpage has the ability of hide>click>slideToggle (which isn't what I want because I'm listing more than one item per page for sale). This syntax is below as well, it's very similar to the syntax that does not work but I've decided to include it anyway.
(Not working syntax. Has classes)
<?php
echo "<div class=\"fmv2\">Your Name</div>";
?>
<div class="p122">
<?php
echo form_open("submit/submit_info");
echo form_label('Your Name:','name');
$data = array(
"name" => 'name',
"id" => 'box_width',
"value" => set_value('name')
);
echo form_input($data);
echo '<br>';
echo form_submit('Submit','Submit');
echo form_close();
?>
</div>
My Jquery (Not working, has classes)
// JavaScript Document
$(document).ready(function(){
$(".p122").hide(function(){
$(".fmv2").click(function() {
$(".p122").slideToggle(300);
});
});
});
Working syntax (Has Ids)
<?php
echo "<div id=\"fmv2\">Your Name</div>";
?>
<div id="p122">
<?php
echo form_open("submit/submit_info");
echo form_label('Your Name:','name');
$data = array(
"name" => 'name',
"id" => 'box_width',
"value" => set_value('name')
);
echo form_input($data);
echo '<br>';
echo form_submit('Submit','Submit');
echo form_close();
?>
</div>
My Jquery. (Working, has Ids)
// JavaScript Document
$(document).ready(function(){
$("#p122").hide(function(){
$("#fmv2").click(function() {
$("#p122").slideToggle(300);
});
});
});
I figured out my problem. I've been playing around with the syntax and the below code works.
$(function() { // Shorthand for $(document).ready(function() {
$('div.p122').hide();
$('div.fmv2').click(function() {
$(this).next('div.p122').slideToggle(300);
});
});