I am using JQuery Mobile PopUp control inside a dynamic table to let user view image in PopUp. Here is my code:
<head>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
while($FormDataRow = mysql_fetch_array($formDataSQLObj))
{
$Imagepath = "Uploaded_Fotos/";
echo "<tr>";
echo "<td>";
?>
<a href="#popupBasic" data-rel="popup">
<img src="<?php echo $Imagepath.$FormDataRow[16]; ?>" width="100px"/>
</a>
<div data-role="popup" id="popupBasic">
<img src="<?php echo $Imagepath.$FormDataRow[16]; ?>" />
</div>
<?php
echo "</td>";
echo "</tr>";
}
The image appear fine inside table but popup shows empty when we click on image.
What's missing?
If you are using same id for multiple images this may be a issue because id is supposed to be a unique so in your code i notice the id is same for each image will not gonna work try this
$index=1;
while($FormDataRow = mysql_fetch_array($formDataSQLObj))
{
$Imagepath = "Uploaded_Fotos/";
echo "<tr>";
echo "<td>";
?>
<a href="#popupBasic_<?php echo index;?>" data-rel="popup">
<img src="<?php echo $Imagepath.$FormDataRow[16]; ?>" width="100px"/>
</a>
<div data-role="popup" id="popupBasic_<?php echo index;?>">
<img src="<?php echo $Imagepath.$FormDataRow[16]; ?>" />
</div>
<?php
echo "</td>";
echo "</tr>";
$index++;
}
Related
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 }
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>
Okay, so basically whenever someone gets on the site the icons are all the same color (White) I want this code to do the follow thing : Whenever someone goes to another page (by clicking on one of the other icons) the icon of the page where he is going should have a different color (blue, this is done by loading another image) but only that page, this should also stay whenever he refreshes the page?
This is the current code that I have for a single icon, its not working yet and im not sure what is wrong..
<?php Yii::app()->session['/home'] = '1';
$home = Yii::app()->session['/home'];
//echo Yii::app()->session['home']; // Prints "value"
if (!empty($home)){ ?>
<a href="<?php echo $this->createUrl("/admin/survey/sa/index")."/home"; ?>">
<img src='<?php echo $sImageURL;?>home.png' alt='<?php $clang->eT("Default administration page");?>' width='<?php echo $iconsize;?>' height='<?php echo $iconsize;?>'/></a>
<?php
}
else{?>
<a href="<?php echo $this->createUrl("/admin/survey/sa/index")."/home1" ?>">
<img src='<?php echo $sImageURL;?>home1.png' alt='<?php $clang->eT("Default administration page");?>' width='<?php echo $iconsize;?>' height='<?php echo $iconsize;?>'/></a>
<?php
}
?>
I agree with Ivo; I think it would be best to do this using CSS classes. You would have the default CSS class have a background image of home1.png, and the blue one have a background image of home.png. If I were doing this, I would use CSS sprites as well.
But, working with what you've got. Here's one way to do it in Yii:
<?php
// Get the current URI
$currentUri = Yii::app()->request->requestUri;
if($currentUri == '/admin/survey/sa/index'){
?>
<a href="<?php echo $this->createUrl("/admin/survey/sa/index")."/home1" ?>">
<img src='<?php echo $sImageURL;?>home1.png' alt='<?php $clang->eT("Default administration page");?>' width='<?php echo $iconsize;?>' height='<?php echo $iconsize;?>'/>
</a>
<?php
}else{
?>
<a href="<?php echo $this->createUrl("/admin/survey/sa/index")."/home1" ?>">
<img src='<?php echo $sImageURL;?>home1.png' alt='<?php $clang->eT("Default administration page");?>' width='<?php echo $iconsize;?>' height='<?php echo $iconsize;?>'/>
</a>
<?php
}
?>
For your other icons you can then reuse the $currentUri variable. You don't need to set any sessions. When you refresh the page the icon will still remain colored.
So, I'm working on a site where on the top of certain pages I'd like to display a static graphic and on some pages I would like to display an scrolling banner.
So far I set up the condition as follows:
<?php
$regBanner = true;
$regBannerURL = get_bloginfo('stylesheet_directory'); //grabbing WP site URL
?>
and in my markup:
<div id="banner">
<?php
if ($regBanner) {
echo "<img src='" . $regBannerURL . "/style/images/main_site/home_page/mock_banner.jpg' />";
}
else {
echo 'Slider!';
}
?>
</div><!-- end banner -->
In my else statement, where I'm echoing 'Slider!' I would like to output the markup for my slider:
<div id="slider">
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/1.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/2.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/3.jpg" alt="" />
.............
</div>
My question is how can I throw the div and all those images into my else echo statement? I'm having trouble escaping the quotes and my slider markup isn't rendering.
<div id="banner">
<?php if($regbanner): ?>
<img src="<?php echo $regBannerURL; ?>/style/images/main_site/home_page/mock_banner.jpg" />
<?php else: ?>
<div id="slider">
<img src="<?php echo ($bannerDir = bloginfo('stylesheet_directory') . '/style/images/main_site/banners/services_banners'); ?>/1.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/2.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/3.jpg" alt="" />
.............
</div>
<?php endif; ?>
</div><!-- end banner -->
If you don't like the offered solution using the syntaxif(...):...else...endif; you also have the possibilty of using heredoc-style to include bigger html-parts into an echo-statement without the need of escaping it.
The code-formatting in here unfortunatly messed up my example, which I wanted to post. But if you know the heredoc-notation, it should not be a problem ;)