<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%" align="center" data-arrows="true" data-click="false" data-swipe="false" data-autoplay="2000" data-nav="thumbs">
<?php
$query="select * from released_movies" ;
$queryr=$con->query($query);
while($row=$queryr->fetch_assoc()) { ?>
<div>
<a href="single.php?id=<?php echo $row['rel_id'];?>">
<img u="image" src="../AbaamAdmin/Released_Movies/<?php echo $row['rel_movies_pics'];?>" />
</a>
</div>
<?php }?>
</div>
I need to create a fotorama gallery slideshow with thumbnails of the larger image. But by giving the above code, no image appears as thumbnail instead I got only a thumbnail border. How I will get the thumbnail image there dynamically. Thanks in advance.
Related
I have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.
I need some help, I have a repeat region which displays pics from a database, when I click on the image I would like to go to another page where there is a photo gallery to display my pictures bigger.
My problem, no matter which thumb I click I get the same set of pictures from the database, which is usually the last thumb listed.
I am new to php, so i am wondering if anyone can help me, thank you.
Code for thumb page
`
<?php do { ?>
<div class="display-property-pic">
<input type="image" id="imageIn1" src="upload/images/<?php echo $row_repeatRegion['thumb']; ?>" alt="Submit" width="100" height="100" ><input name="picHid" type="hidden" value="<?php echo $row_repeatRegion['property_pic1']; ?>">
</div>
<?php } while ($row_repeatRegion = mysqli_fetch_assoc($repeatRegion)); ?>
`
Code for Gallery page
if(isset($_POST['picHid'])){
$pic = $_POST['picHid'];
}
mysqli_select_db($wiplisttest, $database_wiplisttest);
$query_getPics = "SELECT photos.photo_id, photos.pic1, photos.pic2, photos.pic3 FROM photos WHERE photos.property_pic1 LIKE '%$pic%'";
$getPics = mysqli_query($wiplisttest, $query_getPics) or die(mysql_error($wiplisttest));
$row_getPics = mysqli_fetch_assoc($getPics);
$totalRows_getPics = mysqli_num_rows($getPics);
<div class="album">
<div class="description">fixed images</div>
<ol>
<?php do { ?>
<li>
<h4><?php echo "Pic"." ".$row_getPics['pic3']; ?></h4>
<div class="description">Salzburg, Austria</div>
<a href="upload/images/<?php echo $row_getPics['pic3']; ?>">
<img src="upload/images/<?php echo $row_getPics['pic2']; ?>" />
</a>
</li>
<?php } while ($row_getPics = mysqli_fetch_assoc($getPics)); ?>
</ol>
</div>
As you have stored images info in database, there should be id assigned to each image, so when you click on any specific image, get id of that image and retrieve that image on another page using the id.
I am developing a gallery website where users can visit images that other people have shared. I have created the gallery and images can be viewed using thumbnails and the images upload from the right of the previsous image. If an image is at the edge of the page the next image will go in the row beneath it. I use this code to do this:
<?php
mysql_connect("localhost","root","");
mysql_select_db("pardeepsandhu");
$res= mysql_query("select * from images");
$row=mysql_fetch_array($res)
?>
<div id="w">
<div id="content">
<div id="images"><?php while ($row=mysql_fetch_array($res)){?>
<img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" />
<?php } ?>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#images a').lightBox();
});
</script>
However, i am now trying to get a voting system set up. At the bottom of each image there would be a button which will give an image a like. The button works however the images, with the buttons, are being laid out differently. All the images appear one beneath the other, it looks like they are in on column. I don't want this to happen as space will be wasted. This is the code with a button:
<div id="w">
<div id="content">
<div id="images"><?php while ($row=mysql_fetch_array($res)){?>
<img src="<?php echo $row["Image"]; ?>" height="134.1175" width="134.1175" border="5" alt="turntable" />
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="Like this image" />
</form>
<?php } ?>
How do I get the images to load like they did before, so that they appear in rows rather than in one column. Can anyone help me?
To achieve a horizontal layout, you will need to use the css "display:inline-block;" on all of your image / link containers. If I were you, I would have another div which contains all the image and voting info. Also, please make sure you are closing all of your divs as this can dramatically change your layout.
Something along the lines of this should get them horizontal.
<div id="pic" style="display: inline-block;">
<img src="">
<form></form>
</div>
http://jsfiddle.net/u9gSD/
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"));
});
I'm using Drupal 6.x. This is my code on my node-product.tpl.php template. I've created a custom jquery gallery for the products. It works great, but I'm just missing tool tips from my images (both large and small thumbnails). To upload images I'm using a CCK field named field_images. There I input the image titles when I upload the images. How can I add the tool tip code snippet to make it work?
<div class="product-large">
<img src="/sites/default/files/imagecache/360x280/<?php print $node->field_images[0]['filename']; ?>" />
</div>
<div class="product-small">
<?php
// get all images
foreach ($node->field_images as $images) {
?>
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['filename']; ?>" />
<?php
}
?>
</div>
Thanks much appreciated!
Chris
The "tooltip" is a result of the title HTML attribute. You'll want to add title="foo" to your img tag.
Perhaps:
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['data']['filename']; ?>" title="<?php print $images['title']; ?>"/> for the second image and similarly $node->field_images[0]['data']['title'] for the first.