gallery with circle indicator

Reply

arwa55

Member

22 Points

109 Posts

gallery with circle indicator

Mar 20, 2017 08:33 PM|arwa55|LINK

hiii everyone

im working on this gallery which takes its images from my database all good

https://www.w3schools.com/w3css/w3css_slideshow.asp

im trying to do the one that have circle indicater but the indicater wont appear i tied it to the id of the images in the database

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetDatagallery" TypeName="galleryBLL"></asp:ObjectDataSource>
       <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
            <ItemTemplate>
            
               <div class="mySlides">
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("image") %>' width="100%" Height="400px" />
              <h2 style="position:absolute;top:20px">what</h2>
                   <a href="#">hiii</a>
             </div>
                <div class="w3-center w3-display-bottommiddle" style="width:100%;position:absolute;top:-20px" >
    
    <div class="w3-center w3-display-bottommiddle" style="width:100%">
   
    <span class="w3-badge demo w3-border" onclick="currentDiv("+ <%# Eval("Id") %> +")"></span>
   
  </div>
    
  </div>
            </ItemTemplate>

        </asp:Repeater>

<script>
   
     var slideIndex = 1;
     showDivs(slideIndex);

     function plusDivs(n) {
         showDivs(slideIndex += n);
     }

     function currentDiv(n) {
         showDivs(slideIndex = n);
         

     }

     function showDivs(n) {
         var i;
         var x = document.getElementsByClassName("mySlides");
         var dots = document.getElementsByClassName("demo");
         if (n > x.length) { slideIndex = 1 }
         if (n < 1) { slideIndex = x.length }
         for (i = 0; i < x.length; i++) {
             x[i].style.display = "none";
         }
         for (i = 0; i < dots.length; i++) {
             dots[i].className = dots[i].className.replace(" w3-white", "");
         }
         x[slideIndex - 1].style.display = "block";
         dots[slideIndex - 1].className += " w3-white";
     }
</script>

anyone have idea wats wrong i think the code is ok

Reply

PatriceSc

All-Star

41720 Points

14061 Posts

Re: gallery with circle indicator

Mar 20, 2017 09:55 PM|PatriceSc|LINK

Hi,

What do you see when using "view source" in your browser for your onclick event?

Reply

arwa55

Member

22 Points

109 Posts

Re: gallery with circle indicator

Mar 21, 2017 11:21 AM|arwa55|LINK

hiii thanku for ur reply this is how it shows in viewsource

<div class="w3-content w3-display-container" style="max-width:800px">
               <div class="mySlides">
                    <img id="Repeater1_Image1_0" src="../uploads/ads1.jpg" style="height:400px;width:100%;" />
              <h2 style="position:absolute;top:200px;left:100px;color:white;font-size:28px;">The Best Advertisment</h2>
                   <input type="submit" name="Repeater1$ctl00$Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Repeater1$ctl00$Button1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;../services.aspx&quot;, false, false))" id="Repeater1_Button1_0" style="position:absolute;top:280px;left:100px;" /> 
             </div>

                <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
                <span class="w3-badge demo w3-border" onclick="currentDiv("+ 1 +")"></span>
                    </div>

                </div>
            
          <div class="w3-content w3-display-container" style="max-width:800px">
               <div class="mySlides">
                    <img id="Repeater1_Image1_1" src="../uploads/ads2.jpg" style="height:400px;width:100%;" />
              <h2 style="position:absolute;top:200px;left:100px;color:white;font-size:28px;">The Best Advertisment</h2>
                   <input type="submit" name="Repeater1$ctl01$Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Repeater1$ctl01$Button1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;../services.aspx&quot;, false, false))" id="Repeater1_Button1_1" style="position:absolute;top:280px;left:100px;" /> 
             </div>

                <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
                <span class="w3-badge demo w3-border" onclick="currentDiv("+ 2 +")"></span>
                    </div>

                </div>
            
          <div class="w3-content w3-display-container" style="max-width:800px">
               <div class="mySlides">
                    <img id="Repeater1_Image1_2" src="../uploads/ads3.jpg" style="height:400px;width:100%;" />
              <h2 style="position:absolute;top:200px;left:100px;color:white;font-size:28px;">The Best Advertisment</h2>
                   <input type="submit" name="Repeater1$ctl02$Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Repeater1$ctl02$Button1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;../services.aspx&quot;, false, false))" id="Repeater1_Button1_2" style="position:absolute;top:280px;left:100px;" /> 
             </div>

                <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
                <span class="w3-badge demo w3-border" onclick="currentDiv("+ 3 +")"></span>
                    </div>

                </div>