Linking to Dropbox images from FancyBox - javascript

I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?

Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!

Related

Use Javascript to click and trigger downloading of a dynamically generated image

I am doing a web application that generates a QR image (PNG format) for a URL. If the URL changes, the image changes too. Here is the HTML (size parameter indicates the size of the QR image):
<div class="image">
<img src="/img?size=150" />
download
</div>
My goal is to the image is downloaded (instead of being rendered by the browser) when a visitor clicks on the download link. How can I do this?
I searched SO and found related posts that use Javascript to download static image. Any difference here?
Update
I found out this SO link works for me.
Download File Using Javascript/jQuery
Actually there is difference the image is dynamically generated or static. Besides, it guarantees the download for any file types regardless of browser settings.
if I understood your problem well, you can do it like in my example on JsFiddle (I used jQuery here):
https://jsfiddle.net/v6qboyfm/
Here is code:
$('a').on('click', function(e) {
var src = ($(e.currentTarget).closest('.image').find('img')[0].src);
$(e.currentTarget).attr('download', src);
$(e.currentTarget).click();
e.preventDefault();
});
If you can use dynamic source for your image then you can use that in your anchor too.As far as browser is concerned ,there is no difference between an actual image and one generated dynamically through some php script.So you can use the download property trick to make it work just any using php
<div class="image">
<img src="/img?size=150" />
download
</div>

Slideshow href not working

I am using http://www.dhtmlgoodies.com/?whichScript=inline_slideshow jquery script
I want to give different different link in every images.
Looks like
<div class="imageSlideshowHolder" id="slideshow1">
<a href="http://www.learnphp.in">
<img src="../img.mysite.md/events/danceni/s01danceni.jpg" >
</a>
<a href="http://www.google.com">
<img src="../img.mysite.md/events/danceni/s02danceni.jpg" >
</a>
</div>
Above code the two images is sliding but last link http://www.google.com is working but http://www.learnphp.in not working.
How to change link with images?
This is because they are putting two images one over another:
<div class="imageSlideshowHolder" id="imageSlideshowHolder">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image1.jpg" onclick="window.open('http://www.google.com')">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image3.jpg" onclick="window.open('http://www.learnphp.in')">
</div>
But since the second image is always above first, here it will always open second link.
Either use some different library or change the library for your needs.
A mere google search result gave me following results:
http://wowslider.com/
http://bxslider.com/examples
http://www.slidesjs.com/
The slideshow works fine, the problem you have is that this javascript is not setup to provide an individual link to each image in the slideshow. As-is it won't work. I'm gonna see if I can crack ope the JS and modify it. If you rollover the image as it changes you will see that the url in your status bar never changes. Only one anchor tag is working and the content is getting switched out inside that element. You will need to assign a link via JS to each image as it changes.
(I see I was a few mins late on the answer) As the user below said, there are other image slideshow libraries that can do this for you with no modification.
This slideshow code is not optimized, you should look for another javascript slideshow that has the features you want. I found this one here on Stack O and there have been a few questions that debug and actually get the links working, here are the link:
jQuery Slideshow
Add Links
And another:
Link individual images

automatically get the href in <a> tag from the src of an <img> tag

This probably seems like a strange question at first, but I haven't managed to find another way to solve the problem. Apologies if this is long winded, but I wanted to try and explain exactly what I'm trying to do!
Basically, I am using lightbox to display an image which when clicked, enlarges the image (this being what lightbox does..!) This is working fine, however:
What lightbox actually does is load another image - useful so you can have two files, one small (thumbnail) and one large. I could even put the same image in both locations and scale the small one using CSS/html - as I have here - the relevant piece of lightbox code is below:
<a href="image1.gif" rel="lightbox" title="Project one image">
<img src="image1.gif" width="200px" alt="small version of image" /></a>
(I understand that it is preferable to have two seperate files for loading time etc, but in this case this will not work)
But the problem I am having is that the image in the image tag needs to be able to be changed (to a completely different image), without anything else been changed - so without updating the href for the lightbox link. But the lightbox needs to show the same image as is brought up by the image tag- as it stands, both the img tag and a tag need to be changed to do this.
In this case, it will not be possible to edit the a tag - I am setting this up to allow another (fairly technophobic) person to replace the image using CushyCMS (a content editor) - this realistically only gives the ability to change the image itself, as I cannot rely on this person to also update the a tag (this is definitely not an option!)
What I need to know is, is there a way to make the image referred to in the a tag automatically be the same as that referred to in the img tag, whatever this may be at the time? From research so far I believe that jquery / javascript would be the solution here.
I've tried modifying some other javascript code that I've found, but possibly due to my own ineptitude I haven't been able to make it work.
If anyone has a solution, it would be greatly appreciated if they could also idiot-proof it for me, I've successfully used javascript that came complete with script tags, but beyond that I've had little success!
Thanks for your time reading and for any help anyone can offer!
I am still confused by this question, but i think that's what you want. The img src attribute can change from the CMS but no the a. Try this to fix it :
$(document).ready(function(){
var $a = $('a[rel=lightbox]');
$a.each(function(){
$(this).attr('href', $(this).find('img').attr('src'));
})
})

prettyphoto not displaying thumbnail but resolves image when clicked

I had to move my wordpress site to a different directory folder on my hosting server. Now for some reason on the portfolio pages of my website it's not displaying the thumbnail preview for lightbox images. The image will display when the thumbnail is clicked so I know it's pulling the right image from the right place but why is it not showing the preview thumbnail?
Here is a link:
Any help would be really appreciated!
You don't have the img src defined which PrettyPhoto uses to pull the thumb:
OK, well based on your comments the switch across from one server to another has stopped the method aq_resize() working. It is called Aqua-Resizer, here's the Github page;
https://github.com/sy4mil/Aqua-Resizer/blob/master/aq_resizer.php
The wiki on it explains it's use but if all you've done is change the server then you will have to look at other explanations for why it's not working. The following is a list you can start looking through;
Make sure your functions.php still has require_once('aq_resizer.php'); with the correct path to this script. Make sure the script is actually there. If it is try changing the file permissions on the file to see if that helps. If the script uses a cache directory try changing the permissions on this.
It could also be that the PHP version on the new server is different (maybe, I'm guessing now)? Check that too.

Javascript Image Gallery

(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.
According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps

Categories