I'm have a wordpress installation where i have 2x custom fields, that both store images (or rather the urls for the images).
I then have a div that i want to display the images in. but i want to display the first image, then have some nice buttons that will scroll to the next image.
My code so far is below:
<div>
<?php
$front_cover = get_post_meta($post->ID, 'front_cover', true);
$back_cover = get_post_meta($post->ID, 'back_cover', true);
$artwork = $front_cover;
if ($back_cover === '') {
echo '<img src="'.$artwork.'" />';
} else {
echo '<img src="'.$artwork.'" />';
?>
<div class="artwork_controls">
Previous
Next
<span class="sliderPagination">1 of 3</span>
</div>
</div>
<?php } ?>
As you can see. my If statement checks if the back_cover has any content... if it doesn't it displays the front_cover only.
If the back_cover does have content it should display the front cover and then the buttons that the user clicks to load up the back cover.
My thinking was that i could get the 'previous' and 'next' buttons to dynamically change the $artwork variable, but i don't believe that's possible as the PHP would have already been processed?
This code could be completely wrong, but hopefully you can see what i'm trying to do?
<div>
<?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
<?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
<?php $artwork = $front_cover; ?>
<?php if ($back_cover === '') { ?>
<img src="<?php echo $artwork; ?>" />
<?php } else { ?>
<img id="imgA" src="<?php echo $artwork; ?>" />
<img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
<div class="artwork_controls">
<span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
<span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
</div>
<?php } ?>
</div>
One way would be to do AJAX calls and fetch images upon clicking the "Previous" and "Next" buttons.
However you can just put all your images in the final html and do all the rest with javascript and some css.
So if you just put the two images in the html, lets say they have ids "front-image" and "back-image" so you've got this
<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>
Notice the style="visibility: hidden". From than on you can have onClick handlers on your Previous and Next buttons which just set the visibility of the two images.
clickHandlerPrev() {
document.querySelector("#front-image").style.visibility = "";
document.querySelector("#back-image").style.visibility = "hidden";
}
clickHandlerNext() {
document.querySelector("#front-image").style.visibility = "hidden";
document.querySelector("#back-image").style.visibility = "";
}
Then your buttons would look like this
Previous
Next
Though if I'm getting your goal right, I think your buttons are better named simply "Front cover" and "Back cover" since you're not iterating over lots of images, but switching just those two.
Related
How do you change the logo to link to the home URL for all pages except one? I want one page to link to another page when the logo is clicked.
Here is the PHP code for the logo:
<div class="section-boxed section-header">
<?php do_action('pexeto_before_header'); ?>
<div id="logo-container">
<?php
$logo_image = pexeto_option('retina_logo_image') ? pexeto_option('retina_logo_image') : pexeto_option('logo_image');
if(empty($logo_image)){
$logo_image=get_template_directory_uri().'/images/logo#2x.png';
}
?>
<img src="<?php echo $logo_image; ?>" alt="<?php esc_attr(bloginfo('name')); ?>" />
</div>
What about creating a second section of PHP - with a slightly different DIV ID that is called when that paticular page is loaded, rather than this one which is called on all the other pages,
Copy, paste, change DIV ID <div id="logo-container2">, change link address.
In HTML - on the single page that takes them elsewhere - call
<div id="logo-container2">
Would that work?
Try to use template_tag is_page as condition
<div class="section-boxed section-header">
<?php do_action('pexeto_before_header'); ?>
<div id="logo-container">
<?php
$logo_image = pexeto_option('retina_logo_image') ? pexeto_option('retina_logo_image') : pexeto_option('logo_image');
if(empty($logo_image)){
$logo_image=get_template_directory_uri().'/images/logo#2x.png';
}
// Default logo url to home
$logo_url = esc_url(home_url('/');
// if is page about or id 5 anything inside is_page()
if(is_page('about') $logo_url = esc_url(home_url('about');
?>
<img src="<?php echo $logo_image; ?>" alt="<?php esc_attr(bloginfo('name')); ?>" />
</div>
I believe you should be able to use the get_permalink method to check which page you are on, and use an if statement to tell it what the href should be.
<a href="<?= (get_permalink() == '/my-page') ? esc_url(home_url('/go-to-page')) : esc_url(home_url('/')); ?>">
Haven't tested this, but it should work.
I have a div that includes shoutbox posts. I'm using jQuery and ajax to change the pages within the div. However, when the page changes, it loses the link to the javascript file so that the next time I try to change the page it actually continues with the link action instead of doing the ajax in the background. Then after that it's back to normal and it alternates back and forth between being linked to the file and not.
Also before, it was rendering the whole page so that my layout was being displayed on the refresh instead of just the shoutbox posts. I'm guessing that finally getting it to refresh without re displaying the whole layout again is what's causing it to lose the connection to the javascript file.
This is the code for the posts. The shoutbox_arrows contains the links to change the page. refresh_me is what I'm loading into my div to refresh the content.
<div id="shoutbox_arrows">
<?php $current_page=s tr_replace( '?', '#', getURI(fullURL())); ?>
<ul class="no_dots">
<li id="first_page"><<
</li>
<li id="previous_page"><
</li>
<li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
</li>
<li id="next_page">>
</li>
<li id="last_page">>>
</li>
</ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
<div id="refresh_me">
<?php if (sizeof($shouts)==0 ) { ?>
<p>There are no posts.</p>
<?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
<div class="post_info">
<div class="left">
<?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><?php echo ucwords(userinfo($shout['user_id'])->username); ?>
<?php } ?>
</div>
<div class="right">
<?php time_format($shout[ 'created_at']); ?>
</div>
</div>
<p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
<?php echo $shout[ 'comment']; ?>
</p>
<?php if (!$shout[ 'last_edited_by']==n ull) { ?>
<p class="last_edited">Edited by
<?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
<?php time_prefix($shout[ 'updated_at']); ?>
<?php time_format($shout[ 'updated_at']); ?>.</p>
<?php } ?>
<?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
<p class="post_edit"> <span class="edit" id="<?php echo $page; ?>">
<a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
edit
</a>
</span> | <span class="delete" id="<?php echo $page; ?>">
<a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
delete
</a>
</span>
<span class="hide" id="<?php echo $page; ?>">
<?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
hide
</a><?php } ?>
</span>
</p>
<?php }} ?>
<?php } ?>
</div>
</div>
This is the page that my ajax request is going to.
<?php
if (isset($data['page'])) {
$_SESSION['shoutbox_page'] = intval($data['page']);
}
$redirect = ltrim(str_replace('#', '?', $data['redirect']), '/');
redirect_to($redirect);
Div that contains the content to be refreshed.
<div id="shoutbox_container">
<?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>
jQuery
$('#shoutbox_arrows ul li a').click(function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
So I guess to clarify the issue:
The shoutbox_container displays posts for the shoutbox. The page is controller by a session that gets passed as a variable to get the correct chunk of posts to show. Clicking on the links in shoutbox_arrows sends an ajax request to a page which changes the session variable. The div that contains the post itself (refresh_me) as well as the arrows (for the links) get refreshed. After changing the page once, the shoutbox is no longer connected to the javascript file so when you click to change the page again, instead of an ajax request, the page itself actually changes to the link.
Any ideas how I can fix this? I've spent a lot of time on this and it's getting rather frustrating. I feel like I could just settle for it as it is now but it's bugging me too much that it's not working exactly how I intend (although generally it works in terms of changing the pages).
Also just a note, I used jsfiddle to tidy up the code but it looks like it did some funky stuff (looking just at $current_page=s tr_replace). lol. So there aren't any syntax errors if that's what you're thinking. ><
Also I was going to set up a fiddle but I don't really know how to handle links in it so it would have been useless.
The issue is that you bind the click handler to the a tags on document ready (the jQuery code you provided). So when you replace the content of #shoutbox_arrows you remove the click handler you previously attached since those original handlers are removed from the DOM along with the original elements.
You need to use the jQuery .on() method and event bubbling. This will attach the handler on a parent element that will not be removed in your content replace and can continue to "watch" for the event to bubble up from it children elements.
Try replacing your jQuery code with this:
$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
For performance, you should add a class to the a, and targeting it directly with $('a.aClass')
Good ways to improve jQuery selector performance?
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.
I'm using custom meta data to display images as a post in wordpress. When I click the image on my main page it opens in colorbox and this is perfect.
WHAT IS HAPPENING : now, with the image loaded into the colorbox, when I click on the image it cycles through the images on my home page ( NOT what I would like ).
WHAT I WOULD LIKE TO HAPPEN : with the image loaded into the colorbox, when I click on it, it will act as a link and load the post ( associated with that image ) into the colorbox.
I'm not clear on how to do this. The code I'm using to display the image meta data for the posts is:
<?php
// check for spine image
$spine = get_post_meta($post->ID, 'spine image', $single = true);
// check for spine class
$spine_class = get_post_meta($post->ID, 'spine class', $single = true);
?>
<div style=" #position: center; #left: 50%; height: 650px; display: table-cell; vertical-align: middle;">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php
// If there is a spine image, display it as the post
if($spine !== '') { ?>
<p>
<a rel="bookmark" href="<?php echo $spine; ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php echo $spine; ?>" class="<?php if($spine_class !== '') { echo $spine_class; } else { echo "left"; } ?>"
height="400" onMouseOver='resizeImg(this, 150)' onMouseOut='resizeImg(this)'
/>
</a>
</p>
<?php } // end if statement
// if there's not a spine image
else { echo ''; }
?>
</div>
</div>
</div>
And the function I'm using for colorbox is:
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='bookmark']").colorbox({transition:"fade"});
});
</script>
So that the links with the attributes of 'bookmark' will open in the color box. How now can I make it so that the image in the colorbox links to the associated web page ( or act as a link to any web page... one step at a time )?
I hope this makes sense and thank you for any help,
mlord
My question seems overly complicated once I realized how to do this.
The end result is that I used the ".inline" HTML structured example from the website ( http://colorpowered.com/colorbox/core/example4/index.html ). I can put the image from the wordpress loop href'd to the permalink and call it inline for each image / post to be displayed in the colorbox. Then I included the general colorbox class on that link which opens the post inside of the colorbox as well. Awesome!
Keep care,
Matthew