I have following html in which I am using LightBox plugin by Lokesh Dhakar. I am getting images dynamically from database and done all required things to carry out with plugin, but still not working. Only the empty lightbox window appears when page loads.
Here is my code:
while ($fetch = mysql_fetch_array($selectImgResult)) { ?>
<div class="col-md-2 thumbnail">
<span style="color:slateblue;">
<?php echo $fetch['CreateDate']; ?>
</span>
<a href="ProfilePic\<?php echo $fetch['ImageUrl'];?>" data-lightbox="images">
<img src="ProfilePic\<?php echo $fetch['ImageUrl']; ?>" alt="<?php echo $fetch['ImageUrl']; ?>" style="height: 178px;" />
</a>
</div>
<?php }
Related
I'm pretty new to web dev and i'm having an issue with the colorbox plugin.
Everything works correctly when first opening the page.
Default look
Each of the images are links that when clicked on open the respective colorbox.
When clicking colorbox is displayed correctly
When clicking on the close icon or clicking on the background overlay the colorbox closes as it should, but when i click on the colorbox content itself the colorbox stops displaying content and the border and background overlay stays.Error i'm describing
What I would like to do is to disable the clicking functionality of the content so that it only closes when clicking the close icon or the background overlay.
This is my code for the page itself (html/php).
<section class="invitados contenedor seccion">
<h2>Nuestros Invitados</h2>
<ul class="lista-invi clearfix">
<?php while ($invitados = $resultado->fetch_assoc()) { ?>
<li>
<div class="invi">
<a class="invitado-info" href="#invitado<?php echo $invitados['invitado_id'] ?>">
<img src="img/<?php echo $invitados['url_imagen'] ?>" alt="Imagen De Invitado 1" />
<p><?php echo $invitados['nombre_invitado'] . ' ' . $invitados['apellido_invitado'] ?></p>
</a>
</div>
</li>
<div style="display:none;">
<div class="invitado-info" id="invitado<?php echo $invitados['invitado_id'] ?>">
<h2><?php echo $invitados['nombre_invitado'] . ' ' . $invitados['apellido_invitado'] ?></h2>
<img src="img/<?php echo $invitados['url_imagen'] ?>" alt="Imagen De Invitado 1" />
<p><?php echo $invitados['descripcion'] ?></p>
</div>
</div>
<?php } ?>
</ul>
</section>
And the jquery function
$('.invitado-info').colorbox({inline:true, width:'50%' });
Sorry if class names and vars look weird they are in spanish and thanks in advance to anyone that helps.
I am trying to remove the default divs that are wrapped around with the Wordpress Social Login plugin.
This is what is output by default:
<div class="wp-social-login-widget">
<div class="wp-social-login-connect-with">{connect_with_caption}</div>
<div class="wp-social-login-provider-list">
<a class="wp-social-login-provider wp-social-login-provider-facebook">
<img src="{provider_icon_facebook}" />
</a>
<a class="wp-social-login-provider wp-social-login-provider-google">
<img src="{provider_icon_google}" />
</a>
<a class="wp-social-login-provider wp-social-login-provider-twitter">
<img src="{provider_icon_twitter}" />
</a>
</div> <!-- / div.wp-social-login-connect-options -->
<div class="wp-social-login-widget-clearing"></div>
</div> <!-- / div.wp-social-login-widget -->
I'd like to get rid of all the divs and classes associated with the anchors. So that I can style it using my own theme.
I have found the file that generates those tags - but don't want to directly edit the plugin file wsl.auth.widgets.php because when it's updated then I'll have to continuously change it, removing with css display:none; might be an option but I would prefer writing something in the functions.php file so that it's permanent.
I've seen this function which changes the anchors only not sure how to go about removing the divs as well.
function wsl_use_fontawesome_icons( $provider_id, $provider_name, $authenticate_url )
{
?>
<a
rel = "nofollow"
href = "<?php echo $authenticate_url; ?>"
data-provider = "<?php echo $provider_id ?>"
class = "wp-social-login-provider wp-social-login-provider-<?php echo strtolower( $provider_id ); ?>"
>
<span>
<i class="fa fa-<?php echo strtolower( $provider_id ); ?>"></i>
Sign in with <?php echo $provider_name; ?>
</span>
</a>
<?php
}
add_filter( 'wsl_render_auth_widget_alter_provider_icon_markup', 'wsl_use_fontawesome_icons', 10, 3 );
Any help would be appreciated, thanks.
Hello i am updating a WordPress site that was riddled with errors (over 1000...-'-) now i have gotten it down to 15 or so however one page has 105 errors and they are all caused by a stray p tag that is being generated after every image here's what the code is being outputted as
<div id="ngg-image-40" class="ngg-gallery-thumbnail-box" >
<div class="ngg-gallery-thumbnail" >
<a href="a link" title="the title" class="shutterset_set_5" ><br />
<img title="01596-01_1" alt="01596-01_1" src="the src" width="100" height="75" /><br />
</a>
</div>
</p></div>
As you can see there is a p tag there for no reason, I've tried Google but got no one with a solution to this problem, I've tried looking through all the php files for the nextgen gallery and couldn't figure it out the actual code that outputs the gallery is below.
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
</div>
Again as you can see there is no reference to the p tag in the above. Any and all help is appreciated.
I also did not find a solution within the gallery but I have to admit that I didn't search that well. I was lazy and fixed it with javascript as I use a custom javascript for my gallery. Maybe that helps you, too. It's MooTools btw. and assumes that the gallery div has the id "gallery":
var p = document.id('gallery').getPrevious();
if (p.get('tag') == 'p') {
p.dispose();
}
I have a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.
This is the PHP code I'm using to display the large image and thumbnails:
<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</li>
<?php endforeach; ?>
This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:
jQuery(document).ready(function($){
// handle the click of thumbnail images
// redirect it to change the main image
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href");
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
return false;
});
// preload the large images
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// populate the list of images to load
preload(images);
});
Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:
<div class="container-title-description">
<div class="title"><?php echo $current->alttext ?></div>
<div class="descripton"><?php echo $current->caption ?></div>
</div>
The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?
You can view how this setup looks like on this website.
You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href"),
desc = $(this).attr('title'),
title = $(this).find('img').attr('title');
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
$('.container-title-description .title').text(title);
$('.container-title-description .description').text(desc);
return false;
});
Initial HTML (outside your foreach loop):
<div class="container-title-description">
<p class="title"></p>
<p class="description"></p>
</div>
I am trying to generate unique IDs for each modal, as I will be loading in an address specific map to each modal. My issue is that when I click the link:
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
it tries to take me to mypage.php/#myModal_8 (or whatever the given ID is, instead of pulling up that specific modal. The modals work great is I don't have the ID attached, but they won't load dynamic content that way.
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
</p>
<div class="modal hide" id="#myModal_<? echo $meeting['ID'] ?>">
<div class="modal-body">
<? echo $meeting['Address'] ?>
</div>
<div class="modal-footer">
Close
</div>
</div>
Any help on this would be much appreciated. Thank you!
It's all about the ID you are giving to the modal : id="#myModal_<? echo $meeting['ID'] ?>"
The # is only needed for the jQuery selector, not the ID. Which would give :
<div class="modal hide" id="myModal_<? echo $meeting['ID'] ?>">
Further more, you should open your php tags with <?php for the reasons described here : Are PHP short tags acceptable to use?