Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Javascript

Featured Replies

So, I have a div class called blah

 

and I have some links to the side, when you click a link, it'll put an image where blah is.

 

So I think it's something like

 

triggers: '#blah-trigger';
element: '#blah';
switcher: function(0, opts)

 

anyone able to link me to a place that can give me more information on this?

stry1.png
  • 1 month later...

You can easily do this with jQuery.

 

First, have the IMG element have ID attribute with the name of your choosing, then have a list of links (A) that have the link/source of the image contained within an attribute like REF.

 

<img id="blah" src="http://www.iconarchive.com/icons/deleket/halloween-avatars/256/Scream-icon.png" />

<ul id="blah-links">
   <li><a href="#" rel="http://img159.imageshack.us/img159/3129/worldsfinest6as.jpg">Image 1</a></li>
   <li><a href="#" rel="http://avatarfarm.com/avatarimages/cartoons/calvinhobbesavatar.jpg">Image 2</a></li>
   <li><a href="#" rel="http://avatarfarm.com/avatarimages/animatedimages/dancingcactusavatar.gif">Image 3</a></li>
   <li><a href="#" rel="http://avatarfarm.com/avatarimages/people/facelessavatar.gif">Image 4</a></li>
</ul>

 

Use jQuery's event binding methods to grab all the links and just simply change the SRC attribute of the IMG tag which has the ID.

 

<script type="text/javascript">
 // Run the following code only when the document is "read", as in loaded completely.
 $(document).ready(function() {
   // Take the list element (ul) with the id "blah-links", then it's link (a) elements, and bind a click event to all of them
   $('#blah-links a').bind('click', function() {
     // Take the image element which had the "blah" id attribute, and change its attribute called "src" to the "rel" attribute of the link you just clicked.
     $('#blah').attr('src', $(this).attr('rel'));
     // Prevent the link from executing it's original behaviour (taking you to the linked page, which in this case is only an anchor, and wouldn't go anywhere)
     return false;
   });
 });
</script>

 

Here's an example using an online tester application:

 

http://jsfiddle.net/2bJrv/

 

More information about jQuery and it's click events:

 

http://api.jquery.com/click/

http://api.jquery.com/attr/

http://api.jquery.com/

 

--

 

Hope I didn't misunderstand your problem.

 

If you have any further questions or problems, ask and I'll be happy to help you out. ;)

Best regards,

Nico

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.