JQuery - Linking images in a simple slideshow

Hey guys, I am working on creating a very simply image slider that links to different pages of my site. It is all but complete! however, when I wrap my image in "A Href" tags they screw up the transition (Or fade) effect codded into my slideshow. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Simple jQuery Slideshow from JonRaasch.com</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    // use this to pull the images in the order they appear in the markup
    var $next = $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    // uncomment the 3 lines below to pull the images in random order
    // var $sibs = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next = $( $sibs[ rndNum ] );
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
$(function() {
    setInterval( "slideSwitch()", 5000 );
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
    position:relative;
    height:350px;
    width : 610px;
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    // opacity:0.0;
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
#slideshow IMG.last-active {
    z-index:9;
</style>
</head>


<div id="slideshow">
    <img src="images\missions-slide.jpg" alt="Slideshow Image 1" />
    <img src="images\young-lions-slide.jpg" alt="Slideshow Image 2" />
    <img src="images\welcome-to-icc-slide.jpg" alt="Slideshow Image 3" />
</div>
</body>
</html>
The three images on the botem are to be linked to different pages, and I read on the developers forum (The developer of this code that is) that I need to reference the images as Div's. I just don't know how. Also, I am using DWCS5.
I am fluent in C++, java, C# and old school html, so I understand some of this code, but i don't know the basics enough to be able to know what to do here. Please help! Thanks!

You can look at the javax.swing.ImageIcon class and add that to your JOptionPane...
- MaxxDmg...
- ' How should I know, I just wrote the thing... '

Similar Messages

How do i create a linked image slideshow?

I'd like to have asimilar linked image slideshow to the one at the top of this page...
http://www.jdwetherspoon.co.uk/
Any tips would be greatly appreciated thank you!!

jQuery Sliders:
http://basic-slider.com/
http://nivo.dev7studios.com/
http://wowslider.com/
Google will reveal countless others.
Nancy O.

Can Touch be used to create a simple slideshow of images?

Can Touch be used to create a simple slideshow of images?

No, sorry, but you can, of course, produce a series of images for use in a slideshow.

A simple slideshow program for 68k OS7 Macs suggestions pls

I'm looking for a simple slideshow program for my old 68k OS7 Macs. I just want to have some PICTs display on a set time period or key press. Nothing fancy.
I can get Claris to this but wonder if HyperCard can. I'm no expert on HC but it seems to be designed for this exact job. Do I need to find a "stack" or some already made item to open in HC then attach my piks? Any suggestions?

It would be possible to use HyperCard, although you may need to do a little programming if you go with it. If you use a blank HyperCard stack, you can assign one picture per card and link them. Clickable buttons would be the easiest way to do this. Which version of HyperCard are you using?
An old version of PowerPoint would work fine too. Anything older than PowerPoint 98 runs on a 68K unless you are using a 68000 processor, in which case you'll need one of the pre-1994 versions.
Believe it or not, Kid Pix is a possible answer to this as well. Any version from Kid Pix 2 onward (as well as the Kid Pix Companion addon for the original Broderbund version) contains an application called Slide Show, which is used with files in the PICT format. You can display an image for up to 30 seconds and add transitions between slides.

Can't change a linked image???

I have a lot left to learn in Dreamweaver but linking images I've done alot, I hope someone can help me on what I'm doing wrong. The linked image won't let me change links. Here is the home page http://kmmcement.com/. The bottom right picture under click to view slideshow is linked to slideshow.html. I changed the slideshow and named the new one ss.html. When I right click the picture and choose Change Link and select my new ss.html, it does not change it in the code. I tried manually to change it in the code and publish, but the new page won't load up (although when I preview the page, it loads fine.)
The only thing I've done differently on this site is that I finally learned to get the bottom navigation links to work without looking jumpy and jittery when clicking or rolling over them, by going to Modify - Page Properties and choosing links and set them up there (basic that I should've learned awhile ago). I didn't do the navigation bar until last, so would that have anything to do with not being able to change the link? If so, then how can I change it to where only the bottom navigation has it's own style as I'm sure there's going to be alot more links I'm going to be adding.
Thank you in advance for any help. (By the way, I'm using Dreamweaver CS3)

Starting on line 215 of your code, you have this:
<tr>
<td height="338"><div align="center">
<p class="style11">CLICK TO VIEW SLIDESHOW!</p>
<p><a href="slideshow.html"><img
src="images/slideshowpic.JPG" width="347" height="223"
border="0"/></a></p>
</div>
</td>
</tr>
Try changing it to this:
<tr>
<td height="338" style="text-align:center">
<p class="style11"><a href="ss.html">CLICK TO VIEW SLIDESHOW!</a></p>
<p><a href="ss.html"><img src="images/slideshowpic.JPG" width="347" height="223" border="0"/></a></p>
</td>
</tr>
Save. Upload page to server along with ss.html page. Hit refresh in your browser.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Linked image question

I create a monthly newsletter using InDesign CS3 (5.0.4) on a Dell Inspiron 6000 with a 1.5 GHz Pentium M processor, 2 GB of RAM and Win XP/SP3.
I collect information from various sources, some of which are Micorsoft Word documents with graphics, and I rarely have access to the separate graphic files. I have MS Word 2002 SP3.
I can Copy the graphics from Word into InDesign (when I right click on these images in Word, I do not have the Save Image As option). However, when I do so, the image is not linked, it is embedded, whatever the size of the image (and despite the Help file statement regarding images under/over 48 kB).
The problem I encounter is when I try to export (Cross Media Export/XHTML Dreamweaver) a specific newsletter article (Export/Selection), including those embedded graphics (I also create an web version of the newsletter), I receive a message that "...only linked images are exported." I want to export the article including the graphics.
After searching through the InDesign Help file, I found info that says to choose Window/Automation/Data Merge/Content Placement Options/Link Images to link and not embed images. This I have done.
After searching this forum, I found a posting that says Copy/Paste does not preserve links(from any application except another ID file).
In the ID Help file is a statement that the Links panel can be used to change the status (linked or embedded) of a graphic. However, when I open the Links panel after pasting an image into a frame, the only choices are Copy Links and Sort. I concluded that the limited choices are a result of the lack of a separate graphics file. Correct?
I can Paste the image into InDesign, Export it as a JPG (to create a separate graphics file), delete the Pasted image from the ID file, and then Place the JPG file into the ID file. That creates a linked image, which is included with the selected exported newsletter article.
Is there a better (simpler) way to accomplish this task?

There are a number of ways to get graphics out of Word/Powerpoint/Excel, but copy/paste into Indesign is the worst, mainly because you get only screen resolution.
1) Place the Word file. You'll get embedded graphics again (most of them at least), but there's nothing to stop you from unembedding them (through the Links panel), and you'll get full resolution images, not screen previews.
2) Print the Word file to PDF and then Place pages of the PDF.
3) Save the Word file to a web page (as mentioned by Jay and Jeffrey in this thread).
4) Open the Word file in OpenOffice, save in OO's native format, change the extension to .zip, and unzip the file (where you'll find your graphics in separate files).
5) My personal favorite: Copy out of Word and paste into Illustrator or Photoshop. Michael mentioned Photoshop too, but it's important to use the right program depending on the content. If you have a bitmap (a photo, scan, or screen capture), paste it into Photoshop. If you have a vector graphic (a drawing consisting of lines and shapes, like a graph) or a combination of vector and bitmap, paste it into Illustrator. The reason this is my favorite is because it gives me a chance to fix the graphic. If nothing else, everything from Word comes in as RGB, but I also usually need to change the typeface and size the graphic appropriately.
Ken Benson

CS3 - Design View not showing externally linked images

In CS3 Design View, externally linked images are not showing
up... i am only getting the place holder.
To prempt some questions:
1/ Links are correct and complete - apart from the fact that
they show up when previewing in the browser(s) - i have
crosschecked
2/ There are no spaces in the url
3/ In the 'View' menu, 'Display External Files' is checked
I had this problem before and escargo suggested saving and
rebooting. It worked then but strangely, today, that file is again
showing some of the externally linked images but not all. And on a
new file, created today, none of the externally linked images are
showing up... :(
I'm sure there's a simple solution to the problem... anyone
have any idea what it could be?
Thanks and cheers,
JJ

Nope. Some show - some don't.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jhabrix" <[email protected]> wrote in
message
news:faom5n$9ku$[email protected]..
> Bump....
>
> Anyone have a solution to the above problem???

Linked Images : Automatic Folder Creation for linked images?

Best Rgards
Mac OSX 10.9.3
InDesign CC (9.2.1)
Presently: 120 page Blurb publishing with 190 images
I have created a large number of INDD documents that I piece together from many sources,
such as file folders, internet searches, external drives, emails...kind of grabbing things
from all over the place. usually I publish this as a PDF for local and archival use. Sometimes
using this also for newsletters and other ways to distribute documents as pdf and epub.
I never really paid to much attention to LINKED FILES and where they might
be located, as my intent was PDF and you can publish a very
serviceable Pdf without verifying or correcting MISSING LINKS...
NOW, I am working on a higher end 120 page Photo BOOK to have printed on paper.
I did not organise my image assets into a folder, i should have first. Now as I go to
upload to the publisher I find I have to many missing links to images. So I am going
back through the whole project and organising the assets and re-linking...what a lot of work this is.
I was wondering if InDesign supports automatic creation of assets folder?
As you place images, with their links, the program creates a folder and puts a copy of the file there?
I don't see anything about this subject.
I am wondering why not? It would sure make the work flow speed up. Options for
the format, size, pip etc. Does this exist in InDesign and if not
wtf not?
Sure would appreciate anyone's thoughts on this. It is to late now to save this
relinking 190 images, but I realise I need to be better prepared with my assets in the
future. I work on a number of publications, some spontaneously and others
more carefully planned...some sort of auto process for asset-linked-folders
seems a simple enough coding issue. It is 2014 already.
???....best rgards, Thanks for any input on this issue.
WF Posey
Pantelleria Italy

Thanks to everyone for these answers. I guess the real answer is "no", Adobe software engineers see no reason to create a script which
will place linked files into a folder. To bad. A really serious and lazy oversight in my view. The package function is helpful if one has already
organised their assetts.
As great as these programs are, this is an oversight of some frustration. As I said in my comments above, it seems an easy enough routine to program
into the app. Why should a user have to worry about collecting details of resources/links for a document?
Even after all these years?
Best regards, thanks to everyone who contributed some thoughts.
WFP

Dropdown list to change image field linked image?

Hello,
I am quite new in Designer but I have to complete a job and I don't find the solution.
I try to update on a form an image field using the value of a dropdown box and a "if" script.
I use linked images (not embedded ones) and try using a script calling the image Field. value. image. href property.
The property is well updated as export to xml displays well the new href value but the image is not displayed as something was missing to activate it.
form1.#subform[0].ImageField1::calculate - (FormCalc, client)
if (UN_DropDownList == "3373") then ImageField1.value.image.href = ".\Images\UN3373.png"
endif
Rather simple (don't laugh at it) but it doesn't work.
I found solutions for embedded images via visible/hidden by dropdown list (not yet tested) as these ones. I give them below for reference (if some other users are interested)
http://forums.adobe.com/thread/683215
http://forums.adobe.com/message/2187604
http://acrobat.timhuff.net/?p=5
But not for linked images (path or URL). By the way, I found same problem descriptions in other forums but without any proposed solution.
As I should have quite a lot of images with frequent updates, it seems to me a better solutions...
Thanks in advance for you help.
Kind regards
Philippe

Hi Philippe,
Have a look at this blog, http://blogs.adobe.com/formfeed/2009/11/linked_vs_embedded_template_im.html, it turns out that both linked and embedded images are stored in the PDF but just in different ways. So updating the href at run time will have no effect.
If you are not in a possition to store all the images in the PDF at design time then you might have to look at setting up a webservice to access them on a server.
Good luck
Bruce

Pin images in Full Screen Slideshow???

I am using a full screen slideshow in Muse and it appears that all the images are proportionately resized with fill frame and pinned in the center. This means that if some of my images of people don't have the same general layout, some photos have heads cut off, etc. Is there any way to pin these images to the top or bottom so I can have some sort of uniformity? As it is, about have of the images work perfect, while the others look odd because the subject has part of his head obscured by the menu. I know this can be done with a simple fill, but in the slideshow option, you don't have that choice. I have done this with flat out parallax coding, but no idea how to accomplish it in Muse.
Thanks for the quick responses!

Hi
With images in Full screen slideshow we cannot define different pattern for separate images, all images will be used as fullscreen and will resize with browser.
In your case where few images are not same and includes cut off parts , you will need to modify the images outside Muse using any image editor and then use in slideshow.
Or try to modify the layout of the page with page elements if they overlapp any specific page section.
Thanks,
Sanjit

Linked Image Swap & Enlarge on Hover/Mouseover

I have 4 linked images that need to change and grow on hover/mouseover. Originally we just wanted the images to change so I used Dreamweaver to add the rollover functionality (<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />) and it works great... But now they want more of a Mac Dock effect in that the image looks like a thumbnail and when you hover it enlarges. The trick is that when it enlarges, it needs to enlarge over everything so it doesn't rearrange the page. Also, this must work in IE7!!!!!

Yes, I have. I found this jquery hover image zoom: http://demo.superdit.com/jquery/zoom_hover/ but I can't figure out how to add the functionality of also swapping the images. I'm fairly new at webdesign so any examples or tutorials are greatly appreciated!

Warp on Linked Image

I'm finding it very frustrating that I cant apply a simple warp to a linked image.
Why can we apply Perspective Warp, and Puppet Warp as a smart filter but not a standard Warp.
this does not make sense to me.
am I missing something fundamental?
I actually hope that someone has a simple answer that makes me look silly for asking this question...
I realize I could have the AI file linked to a PSD file that is then linked as a smart object to the final PSD
But that is just messy.
AI file is a template for artwork
PSD is the final product, with art from template to show a proof of final product with clients art
I don't want to have to update links in 10 different files every time I change the art on the template.
Hope this all makes sense.
Thanks in advance...
PS. Photoshop 2014.2.2 release on PC

But I can do a puppet warp on a linked AI file.
I'm confused as to why warp cannot be applied as a smart filter in the same way.
to me it looks like puppet warp would be harder to achieve then a simple warp as far as the programmers are concerned.
guess I'll just keep my fingers crossed they fix this in later updates.
I'd also like to see envelope distort with mesh added as that would be extremely useful.
so it looks like I'm stuck having to turn linked files in to smart objects then updating each smart object every time I map new art.
unless there is a way of updating all links to smart objects in one hit.

Simple slideshow help

Hi, I want to create a simple slideshow but my app fails with a NPE when it attempts to read in the first image.
import javax.swing.JFrame;
import javax.swing.JFileChooser;
import java.io.*;
import java.awt.*;
import java.awt.image.*;
import javax.swing.*;
import java.awt.image.BufferedImage;
import java.util.Vector;
import java.awt.Graphics;
public class Main extends JPanel implements Runnable
    private static Vector imagesArray;
    private static volatile Image currentImage;
    private static volatile boolean isInterrupted=false;
    private String strCurrentDir=System.getProperty("user.dir");
    //gets the current working directory
    private JFrame frame;
    private JPanel panel;
    public static void main(String[] args)
        new Main();
    public Main()
        frame = new JFrame();
        panel = new JPanel();
        frame.getContentPane().add(panel);
        getImages();    //prompt the user to select images
        Thread animationThread = new Thread(this);
        animationThread.start();
    public void getImages()
        String strTextFieldContents="";
        //open file chooser so the user can find the file
        JFileChooser fileChooser = new JFileChooser();
        fileChooser.setCurrentDirectory(new File(strCurrentDir));
        //sets file choose to use the current working directory
        fileChooser.addChoosableFileFilter((new ImagesFilter()));
        fileChooser.setDialogTitle("Please select image files");
        int returnVal = fileChooser.showOpenDialog(new JFrame());
        if (returnVal == JFileChooser.APPROVE_OPTION)
                File temp=fileChooser.getSelectedFile();
                strTextFieldContents=temp.getAbsolutePath();
                imagesArray.add((String)strTextFieldContents);
        else{}
        imagesArray.trimToSize();
    public void run()
        while(isInterrupted==false)
            for(int i=0; i<imagesArray.size(); i++)
                try
                    Thread.sleep(200);   //display the image for 200ms at a time
                catch(InterruptedException e)
                    System.out.println("Interrupted");
                // If the Toolkit cannot find the file or load the data it
                // gives no warning. You must check on the loading status
                // for yourself.
                MediaTracker mt = new MediaTracker(this);
                mt.addImage(currentImage, 0);
                try
                    mt.waitForID(0);
                catch(InterruptedException e)
                    System.out.println("media tracker interrupted");
                        int status = mt.statusAll(false);
                if((status & MediaTracker.COMPLETE) != MediaTracker.COMPLETE)
                    System.out.println("status = " + status);
                // getImage is asynchronous, ie, it doesn't wait for the
                // image data to load. So you may need to stop to load it.
                Toolkit toolkit = Toolkit.getDefaultToolkit();
                String strImageLoc=(String)imagesArray.elementAt(i);
                //currentImage = toolkit.getImage("Cuboid_Obstacle.jpg");
                currentImage = toolkit.getImage(strImageLoc);
                currentImage=(BufferedImage)imagesArray.elementAt(i);
                panel.repaint();
    public void paintComponent(Graphics g)
        //super.paintComponent(g);
        Toolkit.getDefaultToolkit().sync();
        if (currentImage!=null)
            g.drawImage (currentImage, 0, 0, this);
}

The compiler tells you which line of your code generates the NullPointerException. Analyze that line to determine which of your references may be null.
Hint: Declaring a variable reference does not initialize it!
Then deal with the ClassCastException the same way.
db

How do linked images in .msgs work offline?

Hello,
I am completely new to Outlook (2013) so I'm confused about linked images in .msgs and how they work.
I want to build an offline email archive. Ideally it would be
in a widely used format
each mail or mail folder would be a single file (unlike html) to keep things simple.
Most importantly, each file would contain the full content of the original message, so I can view it properly even if I have no internet connection, or if the linked images are removed from their servers. Basically I'm hoping they will look like the way
they looked no matter what.
Outlook doesn't seem to do 3. I've read in other threads that 2003 and 2007 do this, but it doesn't say clearly whether it's because the images are really embedded in the msg file or is the file simply drawing from a temporary cache, and will revert to displaying
Xs as soon as the cache is cleared.
So my questions are:
Is it possible to embed all content within a msg for offline viewing
If not, what is 2003 and 2007 doing to make people think it can
If not, what are the reasons
I assume there are reasons for this, because otherwise it would just be weird for an email client that can save messages along with their text styling and attachments to not be able to save them the way they look.
Cheers,
Walt

Hi,
The default for Outlook 2013 is to link to the pictures instead of embedding them.
To let Outlook 2013 work as previous versions, we need to change the registry key as below.
Important
This section, method, or task contains steps that tell you how to modify the registry. However, serious problems might occur if you modify the registry incorrectly. Therefore, make sure that you follow these steps carefully. For added protection, back up the
registry before you modify it. Then, you can restore the registry if a problem occurs. For more information about how to back up and restore the registry,
http://windows.microsoft.com/en-US/windows7/Back-up-the-registry
Press Win + R, type "regedit.exe" in the blank box, press Enter.
HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Options\Mail
Value name; Send Pictures With Document
Value: 1
With a value of 1, you’ll include the picture with the message instead of as a link.
I hope the information is helpful.
Regards,
Melon Chen
TechNet Community Support
It's recommended to download and install
Configuration Analyzer Tool (OffCAT), which is developed by Microsoft Support teams. Once the tool is installed, you can run it at any time to scan for hundreds of known issues in Office
programs.

When I embed a linked image in a document it 'grows' in thickness. What do I need to do to maintain what it looked like before embedding?

When I embed a linked image in a document it 'grows' in thickness. What do I need to do to maintain what it looked like before embedding?

I am using a mac - OSX 10.7.5
I have Adobe Creative Suites - CS5 - Illustrator version is 15.0.2
The contents I am placing are all Vector - Illustrator files
I used 'simple' linear (line) drawings from SolidWorks that have been converted to ai files. It's just weird because I checked the stroke of the drawing and it's not out of line (stroke is about .5 pts). I also made some of the labels in the examples below earlier and they didn't exhibit the 'larger stroke images'. Perhaps I clicked on something in the Preferences or some other place that caused my problem?
I am attaching part of some box labels. You can see how the drawings, of the products, on the 'left side' are "thick" (strokes have grown) after embedding them. I think the "Global Logo" was pasted into a template that was not linked and embedded - that's why it's okay. But look at the Quiet Thunder logo - it looks terrible. These labels are only 2.25" X 6.5", so its important I keep the images lightweight.
Your help is very much appreciated. Thank you!

JQuery - Linking images in a simple slideshow

Similar Messages

Maybe you are looking for