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
Related
I am currently working on a react page that uses a collection of images from unsplash. I've used an <img src="https://source.unsplash.com/random/?Cryptocurrency/" alt="crypto"/> tag to display the images for each content on the page. however, it displays the same image for each piece of content. I've tried looking at the documentation on the unsplash website but I'm unable to fix the problem. Any advice on where to start would be greatly appreciated.
<img alt="crypto" src="https://source.unsplash.com/random/?Cryptocurrency&1">
<img alt="crypto" src="https://source.unsplash.com/random/?Cryptocurrency&2">
Add some random different parameter to every image as shown in my example and it works.
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!
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'));
})
})
jsfidllde
I am trying to get the lazy load effect of social buttons through socialite.js. Everything is fine, but the +1s, likes, tweet counter is for socialite.com and not my website. For example, this code gives socialite.com a "like":
<li>
<a href="http://www.facebook.com/sharer.php?u=http://www.socialitejs.com&t=Socialite.js"
class="socialite facebook-like" data-href="http://socialitejs.com" data-send="false"
data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow"
target="_blank"><span class="vhidden">Share on Facebook</span></a>
</li>
I want it to be for my page. Manually changing http://socialitejs.com to mywebsite.com for each and every different page is too tiresome.
I believe there is a trick to do this with javascript and replacing href with expr:share_url='data:post.url', however this is not working as the code has many other attributes apart from href. Can anyone help me please. Thanks a ton.
When you add the element in which you'll invoke socialite.js:
<a class="socialite twitter-share" href="http://twitter.com/share" data-url="http://socialitejs.com">
Share on Twitter
</a>
You're supposed to replace the value at data-url for your website URL. Then the generated elements will point to your website.
If you, by mistake, already included the wrong URL in many places - and feel it's easier to correct it with JavaScript instead of doing search-and-replace in a bunch of files - then I suggest running this jQuery line before calling Socialite.load():
$('[data-url]').attr('data-url', 'mywebsite.com');
I was given the script found here http://jsfiddle.net/b2Nq9/2/ but cannot get it to seem to work. Can anyone spot why?
The 3 images are meant to display on top in turn, like an image slider.
As I have added a js fiidle link the images will not show, only their alt attributes
You didn't enable jQuery in your jsFiddle. Updated: http://jsfiddle.net/b2Nq9/3/