want to get some cool features for the dj-image-slider. - see them here
but really it is mostly just a CSS thing that we can add to the template stylesheet. Here is a quick example on codepen.io : http://www.codepen.io/jdwires/pen/skpby
Change the class names to something to better fit our needs. The basics are
Put thumbnail and large image onto page next to each other.
Wrap the two images in a link
Apply container style to link
Apply large style to large image
Below is the markup and CSS. See it in action on the codepen link above.
i try to apply the below mentioned code to the page. [ to get the same effectes on the page http://www.maedchenhaus.org ] - see the image in the dj-image-gallery.
- Code: Select all
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/ddf" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/ddf" alt="">
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/fdd" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/fdd" alt="">
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/dfd" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/dfd" alt="">
</a>
- Code: Select all
a.mouseover-thumbnail-holder {
position:relative;
display:block;
float:left;
margin-right:10px;
}
.large-thumbnail-style {
display:block;
border:10px solid #fff;
box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
position:absolute;
top:0;
left:-9999px;
z-index:1;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
top:0;
left:105%;
z-index:1;
opacity:1;
}
i will apply all and come back and report all findings
Again - many thanks!!
update:
many thanks for the answer - and for encouraging me.
investigated it with FireBug and saw quite alot. Note FireBug is a tremendous tool that has got many many options - on a sidenote: i need to have some kind of manual.
i saw that have to tailor the layout.css
- Code: Select all
<ul id="slider37" style="position: relative; width: 400px;">
<li style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1;">
<img alt="g_one1" src="/images/stories/girls_one/m_vignette_hans-on-experience_4545166211_.jpg">
<div class="slide-desc">
</li>
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<img alt="gone_3" src="/images/stories/girls_one/m_vignette_gamergirls_4585918045_.jpg">
<div class="slide-desc">
and i certainly have to tweak a html-file in the template Ja_purity_II
well i dig deeper in the use of FireBug.
will come back and report all the findings.