I am constructing a lighbox gallery, currently experimenting with FancyBox (http://fancybox.net) and ColorBox (http://colorpowered.com/colorbox).
By default you have to include a link to the large version of the image so that the Lightbox can display it. However, I am wanting to have the image link URLs pointing to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg">
I want to do:
<a href="mysite/photos/view/abc123">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$user=$photo->user;
$this->renderPartial('_photo', array('user'=>$user, 'photo'=>$photo, true));
}
}
At some point in the future the function will also update the view count of the image.
Now this approach is working to an extent - most images load up but some do not load up (the lightbox gets displayed in a malformed state). I think the reason for this is because it is not processing the function quick enough. For example when I click the "next" button it needs to go to the URL, process the function and retreive/output the response.
Does anybody know how I can get this working properly?
I added "width" and "height" attributes on my image tags and it works fine now.
Related
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have a product gallery in which the product images will be retreived from the server and shown. It takes sometime for all the images to be retrieved and displayed. I want to show a loading image until the image is rendered from the server.
I have tried as below, by giving an if condition to display a loading image until the image tag gets its source. But its not working, as it just shows a blank space until the image get retrieved from the server.
if($image)
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="<?echo $image;?>"><?
}
else
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
<?
}
Please tell me how can i make it work as expected
Well, you'd have to use JavaScript to update the DOM as you'd like to, as PHP will only process the page once. Doing so would mean switching to AJAX to retrieve the images, though, and that feels a bit like overkill for your scenario. Instead, why not give each image its own container, and then give that container a class with a loading image as its background? Then. once the image has loaded, it displays over the previous loader.
You can not do that on the server side alone. One would need to first load simple "snake" images on the php side:
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
and then through javascript (ajax requets) update all the images like so:
// populate imageList
$.ajax({
url: 'your_server_script',
data: imageList,
success: function(response) {
// update teh src property for the images here usign your server response
}
})
As #ranksrejoined pointed out, however, you might be better off using css to give images a container with widht/height and background image. Then that one gets overridden by the image itself.
I think this is what you need: http://jqueryfordesigners.com/image-loading/.
I think you're suggesting an asynchronous load of the image - you may want to use JavaScript for that. Something you may like to try as alternative, is to apply a background image to a container for each child image.
<div style="background-image: ;">
<img />
</div>
Since lowsrc is deprecated, my best next choice would be Lazy Loading.
That means you only load images that can be seen on the screen right now, and not the images that the browser chooses to load, which can be down the page.
If you use JQuery, then take a look at the nice LazyLoad plugin. Definitely going forwards this time :)
Suggested implementation
you would load the jquery plugin, and write your images like this :
<img data-original="<?php echo $image; ?>" src="media/images/snake.gif">
and let the plugin do the hard work
Hope it helps !
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!
I would really appreciate if anyone can spot anything that I am doing wrong here!
I am attempting to use this plug-in: http://www.sebastianoarmelibattana.com/projects/jail
I have included it in my web page which is a search form that submits via an AJAX request and displays the search results in a table. This table happens to be another plugin called dataTables.
Here are the relevant bits of code:
The re-initialisation of the plug-ins after the AJAX request has been successfully completed (the same initialisation is done in the actual HTML page aswell):
// re-initialise lazyload, lightbox and dataTable plugins
$('img.lazy').jail();
$('a.lightbox').lightBox();
$('#test-docs-table').dataTable( {
"bPaginate": false,
"sDom": 'Rlfrtip',
"aoColumns": [
null,
null,
{ "sType": "title-numeric" },
null
]
});
This is the line of php that displays the relevant table cell with the thumbnail in it:
$shortname = $row['filename'];
$doc = "/central/testdocs/".$row['filename'];
$thumb = "include/doc-thumbnail.php?doc=$doc";
echo("\n<div class=\"thumbnail\">\n<td class=\"center\"><a class=\"lightbox\" title=\"$shortname\" href=\"$thumb&dpi=96\"><img class=\"lazy\" data-href=\"$thumb\" src=\"images/blank.png\" width=\"50\" height=\"50\"/></a></td>\n</div>\n");
Notice that another plug-in is involved - lightbox so not sure if that affects the situation.
At the moment it looks like the JAIL plug-in is doing something but all the images are loaded as soon as the page has loaded.
The lightbox still works when you click on the thumbnails - the page actually works just the same as it did before except that before the page is fully loaded the thumbnail cell is empty.
I discovered what was wrong, the silliest of things!
Because I tried to use the original lazy load plug-in I had an existing rule in my CSS hiding images of class lazy so the plug-in wasn't able to do it's thing.
If anyone else runs into this problem that's what to do!
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.