Carousel

**doron447** · 4 Jul 2009 12:10 AM

Hi all,

I'm trying to make a link from the images that shown in the Carousel. Here is my code:
Notice that the last line inside the "div" is an "a tag" and its still not working.

Does anyone have a solution?

Thanks,
Doron

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=WINDOWS-1255" />
        <title>Ext Carousel Example</title>  
        
     <link href="../examples.css" rel="stylesheet" />
     <link href="carousel.css" rel="stylesheet" />
        
     <script src="../../ext-core-debug.js"></script>
        <script src="carousel.js"></script>
        
        <script>
            Ext.onReady(function() {
                new Ext.ux.Carousel('simple-example');
            })
        </script>
        
        <style>
            div.item {
                padding: 20px;
            }            
        </style>
    </head>
    <body>
     <h2>Example</h2>
    
     <h3>Simple configuration</h3>
        <div id="simple-example" style="padding: 5px; height: 280px; width: 420px; background-color: #E6E6E0">
            <img src="slides/4.jpg" title="מדריך">
            <img src="slides/5.jpg" title="ילד">
            <img src="slides/psy.jpg" title="מנהל מערכת">
      <a href="movies/showMovie.php"><img alt="צפה בוידאו" src="slides/5.jpg" /></a>
        </div>
 
    </body>
</html>

**Condor** · 4 Jul 2009 5:35 AM

Try:

Code:

new Ext.ux.Carousel('simple-example', {
  itemSelector: 'a'
});

(obviously only works if you add anchors to all images)

**doron447** · 4 Jul 2009 5:49 AM

Condor,

Thanks for your quick response.
when you change the anchors to "a tag" the Carusale Isn't working..
anyway I used simple JS that catches the object, take his ID, and then open a new window..

Thanks again,
Doron,

**Condor** · 4 Jul 2009 6:07 AM

itemSelector:'a' also matches the navigation buttons.

Use something like:

Code:

<a class="img" href="movies/showMovie.php"><img alt="צפה בוידאו" src="slides/5.jpg" /></a>

with:

Code:

itemSelector:'a.img'

**doron447** · 4 Jul 2009 6:14 AM

Condor -
It worked!
Thank you very much!

Doron

**koko2589** · 8 Jul 2009 11:07 PM

Originally Posted by doron447

Condor -
It worked!
Thank you very much!

Doron

can i see demo??

**doron447** · 8 Jul 2009 11:40 PM

Hi Koko,

Its not on the server yet,
If you want, remind in one week from now and I will be glad to give you a link to the site.

Doron

**koko2589** · 9 Jul 2009 12:52 AM

ok
can give a cod?

אה אז תגיד שתמבין עיברית עכשיו ראיתי.תביא תקוד.תודה

**doron447** · 9 Jul 2009 1:25 AM

Koko,

here is the code:
****************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=WINDOWS-1255" />
<title>abc</title>

<link href="../examples.css" rel="stylesheet" />
<link href="carousel.css" rel="stylesheet" />

<script src="../ext-core/ext-core-debug.js"></script>
<script src="carousel.js"></script>

<script>

Ext.onReady(function() {
new Ext.ux.Carousel('simple-example', {
itemSelector: 'a.img'
});
})
</script>

<style>
div.item {
padding: 20px;
}
</style>
</head>
<body style = 'direction: rtl; text-align: center'>
</br>
<h1>abc</h1>
<h3>abc</h3>
</br>
<div id="simple-example" style="padding: 5px; height: 350px; width: 420px; background-color: #E6E6E0">
<a class="img" title="כניסת ילדים" href="../login.php"><img src="slides/childs.jpg" /></a>
<a class="img" title="כניסת מדריך" href="../security/loginManager.php"><img src="slides/manager.jpg" /></a>
<a class="img" title="כניסת מנהל מערכת" href="../security/loginAdmin.php"><img src="slides/psy.jpg" /></a>

</body>
</html>

Carousel

Thread Tools

Search Thread

Display

Unanswered: Carousel

Unanswered: Carousel