bftarane
چهارشنبه 02 دی 1394, 00:03 صبح
سلام
لطفاً این گالری رو ببینید
http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.slider
اگه سورس صفحه رو ببینید همچین کدی می بینید
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;"> <div data-p="150.00" style="display: none;">
<img data-u="image" src="/demos/img/travel/01.jpg" />
<img data-u="thumb" src="/demos/img/travel/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="/demos/img/travel/02.jpg" />
<img data-u="thumb" src="/demos/img/travel/thumb-02.jpg" />
</div>
و اگه صفحه رو inspect کنید همچین کدی می بینید
<div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;"><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px; display: none;"></div></div><div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;"> <div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
<div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
<img data-u="image" src="/demos/img/travel/01.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
<img data-u="thumb" src="/demos/img/travel/thumb-01.jpg" style="display: none;">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
</div>
</div>
<div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
<img data-u="image" src="/demos/img/travel/02.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
<img data-u="thumb" src="/demos/img/travel/thumb-02.jpg" style="display: none;">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
</div>
</div>
همین طور که می بینید این خط کد در inspect وجود داره که در قسمت قبلی نبود
<div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
من نیاز دارم که به این دیو یک کلاس اضافه کنم ولی هر چی می گردم متوجه نمی شم این چه طوری و کجا داره تولید می شه!
لطفاً راهنمایی کنید.
لطفاً این گالری رو ببینید
http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.slider
اگه سورس صفحه رو ببینید همچین کدی می بینید
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;"> <div data-p="150.00" style="display: none;">
<img data-u="image" src="/demos/img/travel/01.jpg" />
<img data-u="thumb" src="/demos/img/travel/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="/demos/img/travel/02.jpg" />
<img data-u="thumb" src="/demos/img/travel/thumb-02.jpg" />
</div>
و اگه صفحه رو inspect کنید همچین کدی می بینید
<div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;"><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px; display: none;"></div></div><div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;"> <div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
<div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
<img data-u="image" src="/demos/img/travel/01.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
<img data-u="thumb" src="/demos/img/travel/thumb-01.jpg" style="display: none;">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
</div>
</div>
<div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
<img data-u="image" src="/demos/img/travel/02.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
<img data-u="thumb" src="/demos/img/travel/thumb-02.jpg" style="display: none;">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
</div>
</div>
همین طور که می بینید این خط کد در inspect وجود داره که در قسمت قبلی نبود
<div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
من نیاز دارم که به این دیو یک کلاس اضافه کنم ولی هر چی می گردم متوجه نمی شم این چه طوری و کجا داره تولید می شه!
لطفاً راهنمایی کنید.