te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to showhide big image by clicking on thumbnails? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to showhide big image by clicking on thumbnails? - Stack Overflow

    javascript - How to showhide big image by clicking on thumbnails? - Stack Overflow

    programmeradmin3浏览0评论

    How to show/hide big image by clicking on thumbnails?

    I need like this

    Try with JSFiddle here /

    Is it possible with CSS only. if not then jQuery solution is OK.

    An is it good to use <a href=#"> even it's not opening any new page in same or new tab.

    Edit:

    I forgot to add. it should work on iPad too

    How to show/hide big image by clicking on thumbnails?

    I need like this

    Try with JSFiddle here http://jsfiddle/jitendravyas/Qhdaz/

    Is it possible with CSS only. if not then jQuery solution is OK.

    An is it good to use <a href=#"> even it's not opening any new page in same or new tab.

    Edit:

    I forgot to add. it should work on iPad too

    • javascript
    • jquery
    • css
    • mobile-safari
    Share Improve this question edited Nov 14, 2011 at 12:42 Jitendra Vyas asked Nov 14, 2011 at 12:35 Jitendra VyasJitendra Vyas 153k239 gold badges585 silver badges866 bronze badges 1
    • Try these examples: javatpoint./jquery-photo-gallery-with-thumbnail, jqueryscript/gallery/… – shasi kanth Commented Mar 29, 2023 at 8:12
    Add a ment  | 

    1 Answer 1

    Reset to default 15

    See this example:

    No preloading

    HTML:

    <div id="big-image">
    <img src="http://lorempixel./400/200/sports/1/">
</div>

<div class="small-images">
    <a href="http://lorempixel./400/200/sports/1/"><img src="http://lorempixel./100/50/sports/1/"></a>
<a href="http://lorempixel./400/200/fashion/1/" class=""><img src="http://lorempixel./100/50/fashion/1/"></a>
<a href="http://lorempixel./400/200/city/1/"><img src="http://lorempixel./100/50/city/1/"></a>
</div>

    Javascript (jQuery)

    $(function(){
    $(".small-images a").click(function(e){
        var href = $(this).attr("href");
        $("#big-image img").attr("src", href);
        e.preventDefault();
        return false;
    });
});

    Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.

    Live example: http://jsfiddle/Qhdaz/1/

    If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.

    With preloading

    HTML:

    <div id="big-image">
    <img src="http://lorempixel./400/200/sports/1/">
    <img src="http://lorempixel./400/200/fashion/1/">
    <img src="http://lorempixel./400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel./100/50/sports/1/">
    <img src="http://lorempixel./100/50/fashion/1/">
    <img src="http://lorempixel./100/50/city/1/">
</div>

    Javascript:

    $(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

    http://jsfiddle/Qhdaz/2/

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论