jquery image slider

R8VI
R8VI used Ask the Experts™
on
hi,

I want to know how can i have two image sliders on one page i am using the following link

 http://galleria.aino.se/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
R8VI,

Do the following steps,

this is the default one, create another div with any name say "images1" ,

1 . <div class="images"><img src="me.jpg"><img src="you.jpg"></div> <br />
     <div class="images1"><img src="me1.jpg"><img src="you1.jpg"></div>

Fire upp Galleria:
2 . <script>$('.images').galleria();</script>
     <script>$('.images1').galleria();</script>

rest of the steps are similar.

thanks,

Author

Commented:
hi,

Thanks for this but my problem is that i have the div id ="galleria" wrappign a grid view so i need to it will generate id dynamically and then the scrpit tag will not find the galleria tag

thanks,

R8VI

Commented:
Can you try to this,
1 . Add the Gridview ID
or
2 . Get the ID that is generated at runtime and use it for galleria.

If this doen't work out, please paste your code so that it would be helpful to trace the error , if occured.

thanks.
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Author

Commented:
hi. ok i am trying to get the id that is generated at runtime but not really succesfull as that has another problem which is that the id generated at runtime will not have a css class

here is full code

thanks for the help so far
<style type="text/css">
        #galleria
        {
            width: 700px;
            margin: 20px auto;
        }
    </style>

                <asp:GridView ID="GridViewOutside" runat="server" DataSourceID="SqlDataSource6" AutoGenerateColumns="false"
                    OnRowDataBound="gridviewoutside_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Year">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <div class="galleria" runat="server">
                           
                                    <asp:GridView ID="InsideGridView" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource7">
                                        <Columns>
                                            <asp:TemplateField HeaderText="Picture">
                                                <ItemTemplate>
                                                    <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.PictureName")%>' />
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                    </asp:GridView>
                                </div>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>


    
    <script type="text/javascript">
            $('#galleria').galleria({
           transition: 'fade',
          autoplay: false;
    </script>

Open in new window

Commented:
thanks, can you also paste the output of the code.
Also can u make the basic sketch of the output that u want on the page, (use mspaint...etc, just the look)

thanks,

Commented:
checked the code, it's creting multiple div's.. div inside div...
Remove the second gridview (it creates Div) , instead use Repeater (it does not create div's)

the format we wanted is :
<div id="galleris">
    <img src="aaa.jpg">
    <img src="bbb.jpg">
</div>

but it is printing..
<div id="galleria">
 <div><img src="aaa.jpg"></div>
...
</div>

try this out and let me know.
thanks.

Commented:
I worked with the code , use Repeater for Both. that would solve the issues and works well.

thanks.

Commented:
the code is something like this...

 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2">
            <ItemTemplate>
                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Year") %>'>></asp:Label>
            </ItemTemplate>
            <ItemTemplate>
            <div id="Div1" class="galleria" runat="server">
                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.ImageName")%>' />
                    </ItemTemplate>
                </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2">
            <ItemTemplate>
                <asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.cEmail") %>'>></asp:Label>
            </ItemTemplate>
            <ItemTemplate>
            <div id="Div1" class="galleria" runat="server">
                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <img border="0" width="75px" alt="image" height="75px" src='<%# DataBinder.Eval(Container, "DataItem.City")%>' />
                    </ItemTemplate>
                </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial