I have retrieved images from a folder and using fancybox plugin displayed all the images as picassa view.. only problem is how to bring all the retrieved images into one album. All the images are come one by one, because in while loop. I want all the images into a album. that is, if i have 4 images means, make all 4 into 'profilepic' album, here is my code..
PHP
//get all image files with a .jpg extension.
$images = glob($directory . "*.jpg");
//print each file name
foreach($images as $image)
{
echo $image;
?>
<a class="fancybox" rel="group" href="<?php echo $image; ?>"><img src="<?php echo $image; ?>" alt="" />
<?php
//echo "<a class='fancybox' rel='group' href='$image'><img src='$image' alt='' /></a>";
}
?>
SCRIPT
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Related
I have the following code
<figure>
<?php if ($data[$i]->thumbnail) { ?>
<img src="<?php echo $img ?>" width="465" height="300" alt="news-report-juli19" title="" />
<?php } ?>
</figure>
I want to display images from mysql database dynamically,
the image_field_name=thumbnail.
I have 10 records in db and all have different images.
You should have to given the image path as well when you want to display.
<?php if ($data[$i]->thumbnail) { ?>
<img src="<?php echo base_url('path_of_img/$img'); ?>" width="465" height="300" alt="news-report-juli19" title="" />
<?php } ?>
If you use the Codeigniter framework, please try this.
In controller
$data['images'] = $this->model->get_images();
$this->load->view('view_name', $data);
In model you should make get_images() method that get image urls.
In view
<?php
foreach ($images as $value) {
echo '<img src="'.$value['thumbnail'].'" width="465"
height="300" alt="news-report-juli19" title="" />';
}
?>
Good luck.
use query variale with db colmn where images are present
use this in source img src
echo $query_variable['db_coln_name']
I want to create Gallery using Photoswipe plugin but I want to show thumbs and images automatically form folder.
Photoswipe requires the size of the image, so I want the script to take the size of each image.
Pictures in folder are numbered from 0-14 and it showing images but I don't know how to take size of each image from gallery/ and put it to: data-size="'.$imageSize.'":
<?php
$dir="gallery/";
$thumbsDir="gallery/thumbs/";
for($i=0; $i<=14; $i++)
{
echo
'<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="'.$dir.$i.'.jpg" itemprop="contentUrl" data-size="'.$imageSize.'" data-index="'.$i.'">
<img src="'.$thumbsDir.$i.'.jpg" width="412px" itemprop="thumbnail" class="img-responsive img-thumbnail">
</a>
</figure>';
}
?>
This should look like this: data-size="1920x1080".
You want to make use of getimagesize(), for example.
<?php
$dir="gallery/";
$thumbsDir="gallery/thumbs/";
for($i=0; $i<=14; $i++)
{
if (!file_exists($dir.$i.'.jpg')) continue;
list($width, $height, $type, $attr) = getimagesize($dir.$i.'.jpg');
echo
'<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="'.$dir.$i.'.jpg" itemprop="contentUrl" data-size="'.$width.'x'.$height.'" data-index="'.$i.'">
<img src="'.$thumbsDir.$i.'.jpg" width="412px" itemprop="thumbnail" class="img-responsive img-thumbnail">
</a>
</figure>';
}
?>
So i have a query running and i get results in a while loop. In the while loop I want to set $image as a variable for a image that is needed to be displayed on a html page, by using the variable. I am not able to get the image displayed on the html.
By the way the images are located in the folder.
PHP Code :
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$image = "<img src='images/image1.png'>";
}
}
HTML Code:
<?php include 'File.php';?>
<img src="<?php echo $image; ?>" alt="Mountain View" style="width:304px;height:228px;">
Just change $image = "<img src='images/image1.png'>"; to $image = "images/image1.png";
and then do:
echo '<img src="' . $image . '"/>';
or in your case
<img src="<?php echo $image; ?>" alt="Mountain View" style="width:304px;height:228px;"/>
I'am using codeigniter file upload class to upload images and save full_path in to the database.
But when displaying the images i can't see it.
Here is my code
<?php foreach($images as $img) {?>
<img src="<?php echo $img;?>" width="150">
<?php }?>
From view-source i will open the image link it will mixed with base-url and image full_path.
http://localhost/holiday/admin/profile/package_explained/C:/xampp/htdocs/holiday/uploads/package-images/img-holoday-sample.png
the value of $img is (ie fullpath of the image) C:/xampp/htdocs/holiday/uploads/package-images/img-holoday-sample.png.
How can i display image with full_path?
Only get image name form Controller. Do not track full path.
Bcz your host server doesn't have path like this C:/xampp/htdocs/
<?php foreach($images as $img)
{
?>
<img src="<?php echo base_url()?>uploads/package-images/<?php echo $img;?>" width="150">
<?php
}
?>
Assume that you are not saving the path like that you have mentioned in DB:
Try this (add http:// before print):
<?php foreach($images as $img) {?>
<img src="http://<?php echo $img;?>" width="150">
<?php }?>
On a custom made product view page i'm working off from there is the base image (the large one) and a list of thumbnails which are other images associated with the product in the media gallery (they are just normal images and not the defined thumbnail), what i've been tasked to to is get it so that when you click on a thumbnail it'll change the base image above
i've got that working however i have a problem, when i change the image the image it changes to is very pixelated one, the base image is 737x578 originally so i understand that if the image is smaller it'll be stretched, however the images the thumbnails came from are roughly the same size as the original base image, it's just that they have been re-sized to be 48x48
looking at information in "view image info" in Firefox shows that the image's src is coming from the magento cache (media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/) and not from the original file i have in the media folder
the base image is being created like this
<a class="product-image image-zoom" id="main-image" title="<?php echo $this->htmlEscape($_product->getImageLabel()); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(737, 578).'" width="737" height="578" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
while the thumbnails are being generated like this
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
and this is the javascript i'm using to switch the images
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("src"));
});
});
what change would i need to make to my javascript in order to replace the base image with the original images used by the thumbnails, obviously just changing the src attribute in the tag isn't enough
When you click the thumbnail image, your jQuery is setting the src of the main image to the thumbnail image src (which is 48x48). A click on the thumbnail should set the main image to the large size of the thumbnail image.
So you need a way to reference the large image src from within the thumbnail image element. You can create an attribute called something like data-main-image-src inside the thumbnail image element so that you can reference that later in jQuery:
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(737, 578)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
Then you would modify your jQuery like this so that you change the main image src to be the larger image:
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("data-main-image-src"));
});
});
Manishie's answer almost worked for me, I guess with version 1.9 of Magento things might be a little different. I've updated the PHP as follows:
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
The main change is in how I've called data-main-image-src For some reason Manishie's version was calling in the src of the current main img for every thumb. Instead I've used the same method he used to call in the thumbs but called the large image instead:
data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>"
The jQuery was fine I just had to update the classes being targeted:
$j(".product-image-thumbs li img").click(function(){
$j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});