[thelist] jquery clickable slider

Barney Carroll barney.carroll at gmail.com
Sun Jun 5 14:00:49 CDT 2011


Davoud,

If I remove the $('#slider').click() function, the link to about.html
behaves as expected. The other images are not wrapped in links, so they
don't do anything. I would personally recommend you add links in the markup,
as you have done for this one — so your markup would end up as follows:


<ul id="gallery">
  <li><a href="about.html"><img src="images/mount3.jpg" width="510px" height
="411px" alt="" /></a> </li>
  <li><a href="contact.html"><img src="images/mount2.jpg" width="510" height
="411" alt=""/></a></li>
  <li><a href="register.html"><img src="images/mount1.jpg" width="510"
height="411" alt=""/></a></li>
</ul>



If you must introduce the links via Javascript (why?), then it could be done
like this:

//Attach new links to each image (function linkImgs(){ var URLs =
['about.html','contact.html','register.html']
$('#slider img').each(function(i){ $(this).wrap('<a href="' + URLs[i] +
'"/>') }) }())

However it is counter-intuitive to write this script — it is essentially
writing pre-determined markup, and there's no reason you can't do that in
the HTML.


Regards,
Barney Carroll

barney.carroll at gmail.com
07594 506 381


On 5 June 2011 15:27, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:

>
> Thanks for replying Barney.  Since I have provided the link for scroller
> that is why
> I did not provide all the code. Sorry about that.  but here it is the code
> at:
>
> http://jsfiddle.net/DHmcG/
>
> I have added the cursor:pointer and the code for click function as provided
> before.
>
> Thanks
> davoud
>
>
>
>
>
> > From: barney.carroll at gmail.com
> > Date: Sun, 5 Jun 2011 13:04:32 +0100
> > To: thelist at lists.evolt.org
> > Subject: Re: [thelist] jquery clickable slider
> >
> > Davoud,
> >
> > Either you're not providing nearly enough information, or I've
> misunderstood
> > something fundamental. Usually with "I don't know what I'm doing wrong"
> > questions the best thing is to provide a URL, either where the actual
> code
> > is, or one created by jsfiddle.net.
> >
> > On 4 June 2011 15:55, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:
> > >
> > > I would like to add urls to the images of scroller.
> >
> > I presume you mean you would like to wrap the images in links (<a/>) with
> > HREF values. Why can't you do this in the HTML? It doesn't sound like
> > Javascript is necessary from the outset.
> >
> >
> > I thought having a for loop and array would work which did not.
> > >
> > If you provide us with the array & loop we might be able to tell you why
> it
> > isn't working — as long as you can explain what it was trying to do
> >
> >
> > $('#slider').click(function(){
> > >
> > > window.location.href = "$('a').each('href')";
> > >
> > >                });
> > >
> > > it does return: not found  .../$('a').each('href')
> > >
> >
> > The code above is saying that whenever your slider object is clicked, the
> > page should be redirected to the URL "$('a').each('href')". The quotes
> (")
> > in this mean that it is not to be interpreted as Javascript and instead
> > delivered as plain text — which I can tell isn't your intention. Taking
> the
> > quotes off reveals invalid jQuery code which appears ill thought out.
> > However when I try to image what you did intend, I come up with something
> > like this:
> >
> > $('#slider a').click(function(){
> > window.location.href = this.href
> > })
> >
> > …but this is utterly pointless since a link click directing towards its
> HREF
> > is entirely standard behaviour (which jQuery ScrollTo does not override).
> > Try removing this code entirely. Is it working now?
> >
> >
> > Regards,
> > Barney
> > --
> >
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>


More information about the thelist mailing list