I am developing a image gallery I have thumbnails in below of the page and clicking on any thumbnail image the related big size image is opening on the same page My code is given below ltdiv id34thumbnailswrapper34gt ltdiv id34outercontainer34gt ltdiv class34thumbScroller34gt ltdiv class34container34gt ltdivgt ltaspRepeater ID34rpt134 runa

I solved this by using jQuery ltsection id34bg34gtltsection id34overlay34 style34cursorpointer34gtltsectiongtlta href3434 class34nextImageBtn34 title34next34gtltagtlta href3434 class34prevImageBtn34 title34previous34gtltagtltimg src3434 id34bgimg34 runat34server34 alt3434gtltsectiongtltdiv id34preloader34gtltimg src34imagesajaxloaderdarkgif34 width343234 height343234 alt3434 gtltdivgtltdiv id34imgtitle34gtltdivgtltdiv id34toolbar34gtlta href3434 title34Maximize34 onclick34ImageViewMode39full39return false34gtltimg src34imagestoolbarfsiconpng34 width345034 height345034 alt3434 gtltagtltdivgtltdiv id34thumbnailswrapper34gtltdiv id34outercontainer34gtltdiv class34

Redirect to Image and display in browser when Image is clicked using jQuery

Ikramsha...

SOLVED CLOSED ACTIVE ANSWERED
User: Ikramshams
Posted: on Sep 07, 2015 12:45 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3443

I am developing a image gallery. I have thumbnails in below of the page and clicking on any thumbnail image, the related big size image is opening on the same page. My code is given below.

 <div id="thumbnails_wrapper">
            <div id="outer_container">
                <div class="thumbScroller">
                    <div class="container">
                        <div>
                            <asp:Repeater ID="rpt1" runat="server">
                                <ItemTemplate>
                                    <div class="content">
                                        <a href="images/BigSizeImage/<%#Eval("Image")%>">
                                            <img src="images/Thumbnail/<%#Eval("Image")%>" title="<%#Eval("MainFolder")%>"
                                                alt="<%#Eval("MainFolder")%>" class="thumb" />
                                        </a>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Now I want that if i click on big size image then related page should open. I applied onclick function on big size image then it is not working.

 <div class="content">
        <a href="images/MainFolderImages/Gallery/<%#Eval("Image")%>" onclick="<%#Eval("URL")%>fn=<%#Eval("MainFolder")%>&id=<%#Eval("CId")%>">
            <img src="images/MainFolderImages/Thumbnail/<%#Eval("Image")%>" title="<%#Eval("MainFolder")%>"
                alt="<%#Eval("MainFolder")%>" class="thumb" />
        </a>
    </div>

When I click on thumbnail image then this function onclick is is firing, the big size image is not dispalying. Please suggest me that how I will make the big size image clickable.

Download FREE API for Word, Excel and PDF in ASP.Net

Ikramsha...

0 1

Reply
ANSWER
User: Ikramshams
Replied: on Sep 07, 2015 12:55 AM
Report

I solved this by using jQuery.

<section id="bg">
<section id="overlay" style="cursor:pointer;"></section>
<a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a>
<img src="" id="bgimg" runat="server" alt=""/>
</section>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
<div id="img_title">
</div>
<div id="toolbar">
<a href="#" title="Maximize" onclick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<div>
<asp:Repeater ID="rpt1" runat="server">
<ItemTemplate>
<div class="content">
<a data-cid='<%#Eval("CId")%>' href='<%#String.Format("images/MainFolderImages/Gallery/{0}?{1}",Eval("Image").ToString().Trim(),Eval("CId").ToString().Trim()) %>'>
<img src="images/MainFolderImages/Thumbnail/<%#Eval("Image")%>" title="<%#Eval("MainFolder")%>"
alt="<%#Eval("MainFolder")%>" class="thumb" />
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("section#overlay").click(function() {
                var path = $(this).parent().find("img#bgimg").attr('src');
                var id = path.substring(path.indexOf("?", 0) + 1);
                var ae = $(".content>a").filter(function() {
                return $(this).attr('data-cid') === id;
                });
                window.location.href = ae.attr('data-path');
                //alert(a.attr('href'));
            });
        });
    </script>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Redirect to Image and display in browser when Image is clicked using jQuery

I am developing a image gallery. I have thumbnails in below of the page and clicking on any thumbnail image, the related big size image is opening on the same page. My code is given below.

Now I want that if i click on big size image then related page should open. I applied onclick function on big size image then it is not working.

When I click on thumbnail image then this function onclick is is firing, the big size image is not dispalying. Please suggest me that how I will make the big size image clickable.

Company

Explore

Follow us

Contact Us