Public Forums 71,145 posts

[tombolaman Friend tombolamanJoin date: August 2010Posts: 5Downloads:0Uploads:0 Thanked: 2 times in 1 posts]

#189093

hello dear joomlart-friends and template experts, 🙂

i want to get some cool features to a template in joomla. i am interested in mouseover effects.

i run ja-purityII on a joomla – see it here at the page http://www.maedchenhaus.org

what is aimed: i want to have bigger images in the display of the dj-image-slider: see it in the right collumn – with the alternating images of the girls:

background: i am new to coding 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.

<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>


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

<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

what do you think? I am curious to get to know.
well i dig deeper in the use of FireBug.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#499687

I know idea with cool features as you mentioned above.

I checked on your site and it is using J1.5 with old version JAT3v1 framework. We could not support J1.5 for long time but i can suggest some idea about add new position on your site.

+ Because you added dj-image-gallery module into right position, right position has width very small and doesn’t show full image in dj-image-gallery module

+ You need to create new position with full width your site

Open templates/ja_purity_ii/layouts/default.php file

From


$positions = array (
'left1' =>'left',
'left2' =>'',
'left-mass-top' =>'',
'left-mass-bottom' =>'',
'right1' =>'right',
'right2' =>'',
'right-mass-top' =>'',
'right-mass-bottom' =>'',
'content-mass-top' =>'',
'content-mass-bottom' =>'',
'content-top' =>'',
'content-bottom' =>'',
'inset1' =>'',
'inset2' =>''
);


change to


$positions = array (
'left1' =>'left',
'left2' =>'',
'left-mass-top' =>'',
'left-mass-bottom' =>'',
'right1' =>'right',
'right2' =>'',
'right-mass-top' =>'',
'right-mass-bottom' =>'',
'content-mass-top' =>'content-mass-top',
'content-mass-bottom' =>'',
'content-top' =>'',
'content-bottom' =>'',
'inset1' =>'',
'inset2' =>''
);


+ Go to Module Manager in Admin site and assign dj-image-gallery module with content-mass-top position

[tombolaman Friend tombolamanJoin date: August 2010Posts: 5Downloads:0Uploads:0 Thanked: 2 times in 1 posts]

#499817

hello

many many thanks

did all that. did the code changes. then i went to the module manager in admin site and assigned it to the mentioned position.

it looks nice.

BTW – again to the intial posting:
– what if i want to have the images in the image slider – showed in the right collumn?
– what if i want to have it with the following “behaviour!”? http://www.codepen.io/jdwires/pen/skpby

question: is this doable?

can i do this – i guess that i have to change two files

– the css file
– the html-file.

where do i find the according files? in the template ja-purity II

love to hear from you

greetings

Quesion: if i want to do the above mentioned hack – in the initial posting. Which files do i need to change?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#499867

On your site is using joomla1.5 and it is outdated and is no longer supported by Joomla! or by us anymore… please upgrade to Joomla 2.5

About your request is customize work and out of our JA support scope. But you can find css and html files here

+ Css files:
<blockquote>templates/ja_purity_ii/layouts/blocks/head.php</blockquote>

+ Htmt files
<blockquote>templates/ja_purity_ii/layouts/blocks</blockquote>

[tombolaman Friend tombolamanJoin date: August 2010Posts: 5Downloads:0Uploads:0 Thanked: 2 times in 1 posts]

#499952

hello dear developer

many many thanks for the help i am very very glad that you help me

i willl try to do my best and come back and report all my findings

regards

[Author]

Posts