I'm using fancybox plugin for my image gallery and having really interested trouble.
I have image gallery groups.
On my first group, if i click hover link for to open first image. i'm getting an error like "The requested content cannot be loaded.
Please try again later."
But it works fine in other image groups. For example please check http://www.naplesoft.com/hotels/likya-residence-and-spa-and-the-likya-retreat/?tab=rooms
Click view more info for Deluxe room, then click hover link "Click here to view more room images"
You will get an error.
But if you go other room types like "Deluxe room 106 or other ones" it works fine.
I don't know what did i wrong?
Here is PHP
<?php if (count($room['room_images']) > 0 ) { ?>
<p><a class="fancybox" rel="gallery<?php echo $counter; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" title="<?php echo $image['caption']; ?>" >Click here</a> to view more room images</p>
<div class="image">
<?php // $isFirst = true;
foreach ($room['room_images'] as $image ) {
// if (!$isFirst) { ?>
<div class="foto"> <a class="fancybox" rel="gallery<?php echo $counter; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" title="<?php echo $image['caption']; ?>" ><img style="width:150px; height:96px;" src="<?php echo $image['image']['sizes']['thumbnail']; ?>" alt="" /></a> </div>
Any helps?
Related
I have created a gallery using the acf pro plugin for WordPress. It all works perfectly with images that are in a landscape format. However, because the thumbnail images are a set width and portrait images are different proportions they have a much greater height than the landscape ones when scaled down which obviously looks very wrong.
What I am trying to work out is if there is a way to crop the image for the thumbnail, but still use the original for the lightbox.
You can view the gallery here:
The code is as follows:
<?php
$gallery = get_field('gallery');
$images = array();
$items_per_page = 12;
$total_items = count($gallery);
$size = 'full';
$total_pages = ceil($total_items / $items_per_page);
if(get_query_var('paged')){
$current_page = get_query_var('paged');
}
elseif (get_query_var('page')) {
$current_page = get_query_var('page');
}
else{
$current_page = 1;
}
$starting_point = (($current_page-1)*$items_per_page);
if($gallery){
$images = array_slice($gallery,$starting_point,$items_per_page);
}
if(!empty($images)){
?> <div id="slider" class="flexslider">
<div class="gallery-div">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" ><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
<?php endforeach; ?>
</div>
</div>
<?php
}
?><div class="pagination-links">
<?php
$big = 999999999;
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => $current_page,
'total' => $total_pages,
'before_page_number' => '<span class="screen-reader-text">'.$translated.' </span>'
));?>
</div>
<?Php
?>
Any help would be greatly appeciated.
Your Fancybox is on the link which will open the url in the href, but there's no reason you can't use a different image in your img tag. Why not try this:
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
This should give you the full image in the lightbox, but show the thumbnail image on screen in your gallery.
I like to play songs one by one.I returned the array of the songs name and pass to my view.Following is my view.
<div class="main">
<div class="audio-name">
<?php foreach ($view as $row) :?>
<?php echo $row->audio;?>
</div>
<center>
<audio controls>
<source src="<?php echo base_url();?>musics/<?php echo $row->audio;?>" type="audio/mp3">
</audio>
</center>
<center><a href="<?php echo base_url();?>admin/audio/showaudio" class='back'>Back to All song list</a></center>
<?php endforeach;?>
</div>
<?php include('inc/footer.php');?>
all song player appear at once.How can i fix it.Please help me.
I am trying to go along with bootstrap and Codeigniter, but I am having a little problem, I cant seem to figure out how to align 3 simple elements into one row, so they are aligned perfectly next to each other.
I want my H3 tag, input field and my submit button from my form to be next to each other. I have already tried the span4 on the 3 objects within divs, then also display:inline, but nothing works correctly. I dont know why, but If I want them to be perfectly next to each other, I just have to put there margin-top: -7px and other margins on the other objects but this looks like a not a good approach on this matter at all. Could you please help me ? !
My code:
<div class="well">
<h3>My superb h3 tag!</h3>
<?php echo form_open('search/quick_search'); ?>
<?php echo form_error('search_query'); ?>
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<?php echo form_submit('submit_quick_search','Search','class="btn"'); ?>
<?php echo form_close(); ?>
How does it look
This is how I've been using then together (Horizontal form)
<?php echo form_open('search/quick_search', 'class="form-horizontal');?>
<div class="control-group <?php echo form_error('search_query')? 'error' : ''; ?>">
<label class="control-label" for="search_query">Search Term:</label>
<div class="controls">
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<span class="help-inline"><?php echo form_error('search_query'); ?></span>
<span class="help-block"></span>
</div>
</div>
<div class="form-actions">
<?php echo form_submit('submit_quick_search', 'Search', 'class="btn"'); ?>
</div>
<?php echo form_close(); ?>
I'm trying to submit a form via custom page template but the problem is that it only works with form action="<?php the_permalink() ?>" and I need the form to be submitted and redirected to something like this form action="<?php bloginfo('url')?>/message-sent?id=<?php the_ID() ?>"
Full code:
<?php
$emailError = '';
if(isset($_POST['submitted'])) {
$email = trim($_POST['email']);
//setup self email address
$emailTo = $email;
$subject = "[reminder] Don't forget to download " . get_the_title();
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: Myemail reminders <no-reply#xyz.com>' . "\r\n";
wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
} ?>
<section class="box grid_9 list_posts">
<div class="inner">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="entry-content">
<div class="contact-form clearfix">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<?php _e('Thanks, your email was sent successfully.', 'framework') ?>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error"><?php _e('Sorry, an error occured.', 'framework') ?>
<?php } ?>
<form action="<?php the_permalink()?>" id="contactForm" method="post">
<ul class="contactform">
<li>
<input type="email" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" required="required" />
</li>
<li class="buttons">
<input type="hidden" name="submitted" id="submitted" value="true" />
<input type="submit" value="Remind Me!"></input>
</li>
</ul></form>
<?php } ?></div>
</div>
</div>
<?php endwhile; else: ?>
<div id="post-0" <?php post_class() ?>>
<h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>
</div>
<?php endif; ?></div>
</section>
I got no php errors in log, page is redirected successfully, but no email is sent. When using the_permalink, everything works just fine.
When submitting the form data to a different script, make sure the code for (validating the input and) sending the email is in that very file.
Otherwise, your URL /message-sent might rewrite to a completely different script and the script with the above code isn't involved at all once the submit button gets clicked.
Did that held you? Feel free, to ask, if my wording is incomprehensible or if my description isn't clear to you
Maybe you forgot to put ".php" at the end of your /message-sent?id=xxx file, i.e /message-sent.php?id=xxx?
Another thought: It is always a good idea to filter the user input, because you will receive a lot of spam, put some sort of CAPTCHA validation code and sanitize/validate the whole user input text, i.e. every text, which comes from input fields of your form.
For email:
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
For name and comments:
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$comments = filter_var(strip_tags($_POST['comments']), FILTER_SANITIZE_STRING);
first of all I have very little experience with CSS/HTML, I'm not a webdesigner/coder, basically I have no clue what I'm doing.
I'm also close to kill myself because nothing helped. I really appreciate everyone who's trying to help me.
When you go on pawelpietryka.com and hover on the image it slides in a div via webkit transition and basically everything works.
I'm also using a webkit inset shadow which is animated too. I had big issues with this shadow because it always appeared behind the image (not in front) ... I hacked it with these changes
#demo-5 img { z-index: -1; position: relative; vertical-align: top; }
As soon as I put the z-index: -1; in it doesn't work on iPad/iPhone anymore, I'm tapping on the container and nothing happens.
(I'm assuming it doesn't have a hover state and when I'm trying to tap it it's somehow BEHIND the main layer.)
I've seen this on other page and the ideal scenario would be: 1) First tap box slides in 2) Second tap jump to destination.
Thanks!
If you think of your div nesting as a pyramid such as...
<pyramid>
<section level="1">
<section level="2">
</section>
</section>
</pyramid>
You can't get level 2 to appear under level 1, because level 1 contains level 2. If you would want level 2 to appear over level 2, usually they would be siblings, i.e
<pyramid>
<section level="1"></section>
<section level="2"></section>
</pyramid>
But in your specific case, I would recommend putting the image as the background of the div
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>">
<div class="rel" id="demo-5" style="background: transparent url(<?php the_post_thumbnail('homepage-thumb'); ?>) top left no-repeat">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
Trying to post it here, the formatting is odd on comments
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>"><div class="rel" id="demo-5" style="background-image:<?php the_post_thumbnail('homepage-thumb'); ?>">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
<?php endif ?>
</div></a>
</div>
<?php endwhile; ?>
</div>
And this is the code 'unchanged'
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<div class="rel" id="demo-5">
<?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?>
<?php if ($imbalance2_theme_options['images_only'] == 0): ?>
<a href="<?php the_permalink(); ?>"><div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div></a>
<?php endif ?>
</div>
</div>