Conveyor Belt Slideshow Help

**macko121** · 12-29-2004, 11:46 AM

Convery belt Slideshow
http://www.dynamicdrive.com/dynamici...rightslide.htm

This is a great script but i want to create a popup window for the images in the slide show i've created my popup function and i call it from the <a href> link found in the slide show and a pop up is created when i don't specify a url. However; when i do specify a URL i get and error " Expected(;)"

the line of code that i'm using to call the popup is <a href="javascript:popup('sprotster.htm')"> so is there a way i can make it work please advise

much appreciated

**MrMatt** · 01-04-2005, 01:10 AM

Hi

I've spent the past few days trying to figure this out but have had no joy and would really appreciate any ideas on this. I get the same expected (;) error. I tried adding the ; (after the javascript: ) but the slideshow fails to appear. My coding is as follows:

<head>
<SCRIPT type=text/javascript>

</SCRIPT>
</head>

To try and call the popup function from the slideshow:

leftrightslide[0]='<a href="javascript:Start('images/x_01_large.jpg')"><img src="images/x_01.jpg" border=1></a>'

Any help very much appreciated.

Thanks

Matt

**mwinter** · 01-04-2005, 01:51 AM

Originally Posted by MrMatt

That attribute value must be quoted.

<!-- Begin

"Hiding" the contents of script and style elements has been unnecessary since the introduction of Netscape 2. That should be at least six years ago. Stop doing that.

"toolbar=no,menubar=no,status=yes,location=no,scrollbars=no,resizable=no,width=525,height=525"

Setting the size of a window yet removing the scroll bars and preventing it from being resized is, quite frankly, dumb no matter what is being placed within the window. If the user doesn't need to resize the window, providing that ability does no harm. Similarly, if the scroll bars aren't needed, there's no problem. However, if for some reason either of those features are necessary, you've just made that window very difficult to use.

By the way, a shorter (corrected) version of that feature string is

Code:

'status,resizable,scrollbars,width=525,height=525'

leftrightslide[0]='<a href="javascript:Start('images/x_01_large.jpg')"><img src="images/x_01.jpg" border=1></a>'

The javascript: pseudo-protocol was intended to be used when the content of a document was to be replaced based on the interpretation of some Javascript code. Be that as it may, the pseudo-protocol should not be used on the Web as it provides users with no scripting support no fallback.

The link above should be written:

HTML Code:

<a href="images/x_01_large.jpg" target="ctrlWindow"
 onclick="OpenWin=openWindow(this, 525, 525);return false;"
 ><img alt="Provide your own alternative text, even if it's an empty string"
  src="images/x_01.jpg"
></a>

with openWindow defined as

Code:

function openWindow(link, width, height) {
  return window.open(
    link.href,
    link.target,
    'status,scrollbars,resizable,width=' + width + ',height=' + height
  );
}

Make openWindow more (or less) generic as you see fit. If you want to control the border around the img element, use CSS. At a basic level, you'd achieve the same effect with

Code:

a img {
  border: 1px solid;
}

The border should inherit the colour of the link. However, as that would apply to all images within links, you may need to be more specific with your selector.

Mike

**MrMatt** · 01-04-2005, 03:03 AM

Hi

Thanks for the prompt reply.

1. My fault - typo - forgot the quotes in the post.

2. Have removed the <!-- Begin - thanks - I have only started learning Javascript in the past month but I've seen it referenced this way on several script web sites.

3. Makes sense. My reason for removing scrollbars was that the x_01_large.jpg is 500x500 so I just set the window size to slightly larger.

4. I've made the changes as suggested but unfortunately I am still getting an error (expected ;). The conveyor belt slideshow fails to start.

Is the problem because I am calling the openwindow function from within another javascript?

Thanks

Matt

**mwinter** · 01-04-2005, 12:40 PM

Originally Posted by MrMatt

Thanks for the prompt reply.

You're welcome.

Have removed the <!-- Begin [...] but I've seen it referenced this way on several script web sites.

Unfortunately, much of the material on the Web (and in books) is out-of-date.

I've made the changes as suggested but unfortunately I am still getting an error (expected ;).

Are you escaping the inner set of quotation marks? For example,

Code:

'some "quoted" text'

is fine because the innermost quotes are different from the outer set. However,

Code:

'this isn't OK'

the apostrophe here is a syntax error. It would need to be written

Code:

'this isn\'t OK'

Hope that helps,
Mike

**MrMatt** · 01-04-2005, 02:07 PM

Hi

You found the problem - the img alt tag had a word with an apostrophe in it which was causing the error. Have removed this and now it works.

Many, many thanks.

Matt

**something4u** · 01-06-2005, 02:31 PM

Originally Posted by mwinter

That attribute value must be quoted.

with openWindow defined as

Code:
function openWindow(link, width, height) {
return window.open(
link.href,
link.target,
'status,scrollbars,resizable,width=' + width + ',height=' + height
);
}

Make openWindow more (or less) generic as you see fit. If you want to control the border around the img element, use CSS. At a basic level, you'd achieve the same effect with

Code:

a img {
  border: 1px solid;
}

The border should inherit the colour of the link. However, as that would apply to all images within links, you may need to be more specific with your selector.

Mike

hi hi i have the same problem but i´m very newbie and so it would be nice if you could explain this part (where and how i had to put in the script)

thx

Stefan

**mwinter** · 01-06-2005, 03:41 PM

Originally Posted by something4u

it would be nice if you could explain this part

Which part would that be?

To try to answer all possibilities:

HTML Code:

<head>
  <!-- Any head-content elements, including TITLE -->

  <style type="text/css" media="screen">
    /* Alternatively, you could place the rule below in an external file.
     * The HTML Specification (http://www.w3.org/TR/html4/) provides
     * details on how do this in section 14.3 - External style sheets
     * (http://www.w3.org/TR/html4/present/styles.html#h-14.3).
     */
    a img {
      border: 1px solid;
    }
  </style>

  <script type="text/javascript">
    function openWindow(link, width, height) {
      return window.open(
        link.href,
        link.target,
        'status,scrollbars,resizable,width=' + width + ',height=' + height
      );
    }
  </script>
</head>

<body>
  <!-- Document content -->

  <p><a href="http://www.example.com/" target="example"
   onclick="openWindow(this, 533, 400);return false;"><img
   src="example.jpg" alt="Lorem ipsum dolor sit amet..."></a></p>

  <!-- More document content -->

Hope that helps,
Mike

[edit: wasn't quite finished

]

**something4u** · 01-09-2005, 01:20 AM

wow thx a lot....

is it possible to get a black background in the popup? and it would be cool if click on the popup would close it

my site --> www.something4u.de

**mwinter** · 01-09-2005, 01:01 PM

Originally Posted by something4u

is it possible to get a black background in the popup?

If you're just showing an image, no.

it would be cool if click on the popup would close it

Think about that for a moment. What if the user clicks on the pop-up for some other reason? For example, to re-focus it after using another window/application. A user would not be happy for that window to disappear. Users know how to close a window using their browser. Let them do it.

On a similar note, it's a pet peeve of mine when authors think it's "cool" to close a window when the blur event is fired. There are so many reasons why a window may lose focus, completely unrelated to my use of their site. Just because they might single-task when browsing doesn't mean others do.

Mike

Thread: Conveyor Belt Slideshow Help

Thread Tools

Search Thread

Conveyor Belt Slideshow Help

Bookmarks

Bookmarks

Posting Permissions