I don't know exactly where to start to display files from the file set in order to show a fancybox gallery on click. I would like to have the gallery open from a link. On click show the gallery, aka images that have the same rel but are set to display:none (easily controlled by my css). I can do it from selecting one image but am not sure how to pass the images from the file set into the view (I'm assuming I need to create some kind of function in my controller to get the fsID, just not sure how). I just need the first image to display on the page (thumbnail image), then click the link and it shows more full size images.
Basically, if you know Concrete5, I would like it to be like the image block, except that the administrator can choose a fileset instead of one image.
here is my view.php
$picture = $this->controller->getPicture();
if ($picture) {
$bigPicture = $image->getThumbnail($picture,600,600)->src;
$smallPicture = $image->getThumbnail($picture,200,200)->src;
echo "<img src=" . $smallPicture . " alt=" . $imageTitle . " title=" . $imageTitle . "/>";//thumbnail picture
echo "<div id=\"image-modal\">";
echo "{$linkText}";//open fancybox from link
echo "<div class=\"hiddenGallery\" style=\"display:none;\">";//hidden images
echo "<a href=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" rel=" . $title . " title=" . $imageTitle . ">";
echo "<img src=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" />";
echo "</a>";
echo "</div>";
echo "</div>";
}
my controller.php
function getPicture() {
if ($this->fIDpicture > 0) {
return File::getByID($this->fIDpicture);
}
return null;
}
my add.php
$al = Loader::helper('concrete/asset_library');
echo $al->image('ccm-b-image', 'fIDpicture', t('Choose File'),
$this->controller->getPicture());
echo '</div>';
Any and all help is much appreciated.
Well, two things :
You have to set the class="fancybox-thumb" AND the rel attribute to the <a> tag!!, not to the <img /> tag.
If you are planing to hide the rest of the elements of the gallery, don't set a display: none; css property to each of them, but rather wrap them in a hidden <div> container like :
<div style="display: none;">
<a class="fancybox-thumb" rel="gallery" href="images/02.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/03.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/04.jpg"></a>
... etc
</div>
I am using the rendered html, which is what it matters.
I have some code which handles the entire back-end (add/edit/controller) part of this equation:
https://github.com/jordanlev/c5_designer_gallery
Here's a tutorial that explains how to use it (with the example of the FlexSlider, but if you know how Fancybox works then it shouldn't be hard to understand what's going on):
http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/
Related
Thanks for taking the time. I trying to make some image links inside of a DIV in html. The links are stored in a SQL DB. The links work just fine when outside of this specific div, but I really want to put them inside for styling purposes. The social images div is the one
echo "<div class=column-3>";
echo "<h3 id=\"artistNameLabel\"><strong>$artist_name</strong></h3>";
echo "<img id=\"artistImage\"src=\"imageuploads/$imageFilePath\">";
echo "<p><img alt=\"Artist Instagram\" src=\"images/instagramLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "<p><img alt=\"Artist Streaming Account\" src=\"images/spotifyLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "</div>";
The images appear just fine, but the link doesn't work. Also the text value that is the link is loaded just fine. Thanks for any help
echo "<div class=column-3>";
echo "<h3 id='artistNameLabel'><strong>".$artist_name."</strong></h3>";
echo "<img id='artistImage' src='imageuploads/".$imageFilePath."'>";
echo "<p><a href='".$artistInstagram."' target='_blank'><img alt='Artist Instagram' src='images/instagramLogo.png' width='25%'></a></p>";//link doesnt work
echo "<p><a href='".$artistStreaming."' target='_blank'><img alt='Artist Streaming Account' src='images/spotifyLogo.png' width='25%'></a></p>";//link doesnt work
echo "</div>";
You can try like this way :
$artistInstagram = "https://www.instagram.com/";
$artistStreaming = "https://www.example.com/";
$artist_name = "Test";
$imageFilePath = "https://via.placeholder.com/150";
$html = <<< EOT
<div class=column-3>
<h3 id="artistNameLabel"><strong>$artist_name</strong></h3>
<img id="artistImage"src=$imageFilePath>
<p>
<a href=$artistInstagram target="_blank">
<img alt="Artist Instagram" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
<p>
<a href=$artistStreaming target="_blank">
<img alt="Artist Streaming Account" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
</div>
EOT;
echo $html;
I think this will solve your problem
You need to style you anchor tag with "display:inline-block" and it will work fine. no matter if image is there or not.
I have created some code to make buttons clickable and return a value.
When I click on the image in the browser the querystring is showing the x-y coordinates of the image I am currently in, while it should put the name of the image in the querystring.
I also replaced the "value" value to "test" just to check if it works but I still get x-y coordinates.
<?php
$dirname = "images_fotoviewer/";
$images = glob($dirname."*.jpg");
foreach($images as $image){
echo "<form action='24_fotoviewer.php' method='GET'>";
echo "<input type='image' src='" . $image . "' name='foto' value='" . $image . "'/>";
echo "</form>";
}
?>
This is the querystring I get:
iwp1_basis_php/24_fotoviewer.php?foto.x=164&foto.y=48
Could someone help me to get the name of the image in the querystring?
Thanks in advance.
If you use input type="image" you will get a submitbutton as an image. It is default behaviour to send the x/y coordinates where you clicked it.
So to get the behaviour you want to try this:
Replace the form with an hyperlink (a href=...)
Create a hyperlink that contains the name of the image
Something like this:
<?php
foreach($images as $image){
?>
<a href="24_fotoviewer.php?imgName=<?php echo urlencode($image); ?>">
<img src=<?php echo $image; ?>
</a>
<?php
}
?>
By compiling this, display three image get my database and show it, when i click each image popup window show last image of my database.I want to know how to display the particular image, when i click first image,then popup window show first image and description, as well as same way second and third image. check to array loop in this code...
enter code here
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN = array();
$i=0;
$firstN = '<img src="'.$row ['image'].'">';
echo ' <a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ' ; echo $productname;echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
<div id="myModal" class="reveal-modal">
<form>
<table>
<tr><td><?php echo $r; ?></td>
<td><h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p></td>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
I guess you have the images stored in the database like BLOB data. If so you need to create a handler to retrieve those images and render them as image/[mime]...
So in short.
In your code you need to create a new file iz get_image.php in it you need to make a request to the server and retrieve the image so you can send it to the client.
In your code you need to change the image path to the handler path with some query parameters.
$firstN = '<img src="get_image.php?imageid='.$row ['productid'].'">';
There are a lot information how to render the image to the client from the internet.
may be you have to declare your $firstN = array(); and then incrementor $i=0; out of while loop and put in array like this:
$firstN[$i] = '<img src="'.$row['image'].'">';
below is the full code:
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
$firstN = array();
$i=0;
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN[$i] = '<img src="'.$row['image'].'">';
echo '<a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ';
echo $productname;
echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
Updates:
You have a space here:
$firstN[$i] = '<img src="'.$row['image'].'">';
//-----------------------------^----here at this code block;
To get the last image , you need to modify your query to have SORT BY productid DESC
To display the images
echo "<a href='xxx.php?imgid=$image'><img src='yourimagesfolderpath/$image.jpg'> </a>";
to navigate in the images , you have to use JQUERY
I am using lightbox to show an image in php.
My current code:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" class="photo_frame photo_size" >
<br />
<?php
echo $res['title'];
?>
</a>
CSS and JS for lightbox have already been included. In the above code, $res['title'] and $res['path'] are being fetched from database.
If I click on the image or the text which is showing as $res['title'], lightbox effect is showing. The image is within the lightbox. Now I need the $res['title'] value also be displayed when the lightbox is opened along with the image.
How do I do that?
Just use the title parameter in the <a> tag, as mentionned in the Lightbox Documentation:
Optional: Use the title attribute if you want to show a caption.
You must add the title:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" title="
<?php
echo $res['title'];
?>
" class="photo_frame photo_size" >
</a>
You should be able to move all of your markup into a div. Add rel="lightbox" to that div, it should work. Although that depends on the lightbox library you are using.
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.