Active state aan thumbnails toevoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Low Code Ontwikkelaar

In het kort Als Low Code Developer werk je aan projecten bij en voor onze klanten, waarbij je voor het ontwikkelen van de oplossingen een technisch low-code platform gebruikt. Samen met het team streef je naar de beste oplossing en bepalen jullie de juiste aanpak. Je rol is divers en je bent van begin tot eind betrokken bij de ontwikkeling zowel de back-end en de front-end van de applicatie. Naast de ontwikkeling en oplevering, breng je ook advies uit aan de klant waarom bepaalde keuzes worden gemaakt. Je bent dan ook communicatief sterk en kunt je keuzes goed (inhoudelijk) onderbouwen.

Bekijk vacature »

Technical Specialist Civil Engineering

TenneT is growing fast to realize its strategic ambitions. We play a leading role in driving the energy transition. We are looking for a passionate Technical Specialist Civil Engineering who will contribute to this and that might be you? Your contribution to TenneT The Technical Specialist Civil Engineering (m/f/d) is acting as an expert for a specific and assigned topic or system and taking over full responsibility for the technical expertise of the assigned systems within the department. Including ensuring the quality of the systems (incl. documentation, equipment, process robustness, etc.) meeting requirements (according to contract, technical standard, SHE design

Bekijk vacature »

Mendix Developer

Wat wij bieden een contract voor onbepaalde tijd en goede primaire arbeidsvoorwaarden; een flexibele werkomgeving waar je tijd en plaats onafhankelijk kan werken; een ruim mobiliteitsbudget voor een keuze in een leaseauto of voor je eigen vervoer; een flex benefit budget en collectieve regelingen (o.a. thuiswerkfaciliteiten, korting op je zorgverzekering en bedrijfsfitness); een keuze in een laptop en je ontvangt een telefoonvoucher t.w.v. €290,-; een betrokken community dat gericht is op jouw interesses, teambuilding, gaming en evenementen; onbeperkt opleidingsbudget om je technisch en persoonlijk te blijven ontwikkelen. Wat jij meeneemt je hebt een (technische) HBO of WO-diploma behaald; je bent

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Senior Front-end Developer

Wordt jij de nieuwe Front end specialist / developer? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel binnen als

Bekijk vacature »

Frontend Developer

Dit ga je doen Door ontwikkelen van het online platform Deel uitmaken van verschillende ontwikkelteams Meedenken over UI/UX vraagstukken Uitdragen van Front-end binnen de organisatie Hier ga je werken Deze organisatie, gevestigd in de omgeving van Amsterdam, is een grote onderwijs instelling met meerdere vestigingen en een groot aantal studenten. Zo telt deze organisatie +/- 35.000 gebruikers. Bij deze organisatie staat jouw ontwikkeling centraal en is er veel ruimte voor eigen initiatieven. In samenwerking met jouw team ga jij de online omgeving verder ontwikkelen. In de rol van Front end Developer zal jij 50% van jouw tijd werken in het

Bekijk vacature »

Senior Front-End Developer

Als Senior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Wat doe je als Senior Front-End Developer bij Coolblue? Als Senior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Senior Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Nadenken

Bekijk vacature »

C# Software Developer

Samengevat: Deze werkgever is een innovatieve technisch dienstverlener op het gebied van beveiliging en interne logistieke systemen. Ben jij geschikt als software ontwikkelaar? Heb je ervaring met javascript? Vaste baan: C# Software Developer ElektrotechnieK HBO .NET 2.800 - 4.000 Software Ontwikkelaar Wij kenmerken ons door de verscheidenheid aan producten en diensten op gebied van beveiliging. Deze werkgever is een succesvolle full service provider en ontzorgen de klant volledig door de implementatie van nieuwe technologie. Samen met klanten creëren wij beveiligings- en business oplossingen die resultaat opleveren. Wij creëren innovatieve oplossingen door te werken met de nieuwste technologieën. Uitgangspunt hierbij zijn

Bekijk vacature »

Levens redden als .NET Developer!

Bedrijfsomschrijving Wil jij als C# developer bijdragen aan het redden van mensenlevens? Wil jij je kennis en ervaring inzetten om bij te dragen aan innovatie binnen de medische industrie? Dan hebben wij een mooie technische uitdaging voor je bij onze klant in de omgeving van Ede. Met ruim 4000 medewerkers wereldwijd is deze organisatie een gevestigde naam in de branche. Dit bedrijf streeft er met hun software en apparatuur naar wereldwijd de zorgsector en bijbehorende behandelingen inzichtelijker en efficiënter te maken. Momenteel is dit bedrijf bezig om zich voor te bereiden op een migratie van de software naar een nieuwe

Bekijk vacature »

Senior Front-end Developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als Senior Front-end Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel

Bekijk vacature »

Robot Programmeur

Bedrijfsomschrijving: Locatie: regio Apeldoorn Deze organisatie ontwikkelt, test & released robots en verzorgt het product lifecycle management, vanaf potloodschets tot implementatie. Producten worden geschikt gemaakt voor seriefabricage. Als Robot Programmeur werk je samen met de Product Engineers, Cost Engineers, Test Engineers, Process Engineers en Workshop Technicians. Ze streven naar robuuste producten die onder uitdagende omstandigheden, over de hele wereld goed blijven functioneren. Lijkt het jou leuk om dagelijks met innovatie bezig te zijn en robots te ontwikkelen in een multidisciplinair team met een projectmatig karakter? Wil je als Robot Programmeur meewerken aan het ontwerpen en ontwikkelen van state of the

Bekijk vacature »

Lead Webdeveloper

As Lead Web Developer at KUBUS you are responsible for the implementation design of requirements and the software architecture of the web application and services of BIMcollab. In your role as lead developer you will naturally search for the optimum between the required implementation time, the performance of the application and a fast go-to-market of features, in line with our automated test and release train. Together with the other senior developers in your team you monitor the architecture of the application and you advise the product owner about necessary refactoring to improve the maintainability of the platform. Our development team

Bekijk vacature »

Azure Cloud Engineer / Systeembeheerder / System A

Ons aanbod Direct een arbeidsovereenkomst voor onbepaalde tijd. Een salaris tussen tot € 5.000,- bruto per maand. Attached betaalt al je opleidingen. Onbegrensde doorgroeimogelijkheden. Een lease auto naar keuze. Een heel goede collectieve pensioenregeling bij StiPP. Regelmatig leuke uitjes; o.a. F1 in Barcelona bij ons 25 jarig jubileum en gezellige borrels. Mooie opdrachten bij de top 100 bedrijven in Nederland. Wat maakt werken bij Attached nou zo bijzonder? Werken bij Attached betekent werken bij een dynamisch, financieel gezonde organisatie die al 25 jaar actief is in de ICT. Attached is een middelgroot bedrijf, hetgeen tot uiting komt in de persoonlijke

Bekijk vacature »

Senior developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Java-softwaredeveloper

Wat je gaat doen: Dit ga je doen Daar kunnen we heel kort over zijn: software ontwikkelen met de agile-/scrumteams van toonaangevende organisaties. Zoals ministeries, gemeentes, financiële instellingen en retail- en energiebedrijven. En als het bij je past, begeleid je collega-developers in het ontwikkelproces. Doordat je tijdelijk aan een opdracht werkt, doe je in korte tijd veel mooie ervaringen op en leer je nieuwe technieken en tools kennen. Je teamleden werken bijvoorbeeld met Spring, JPA/Hibernate, AJAX, REST/JSON, GIT, AWS en TDD. Het interessante is dat jij volledig in control bent en zelf kiest welke opdrachten je oppakt. Het soort rol,

Bekijk vacature »
Sebas V

Sebas V

18/10/2012 16:09:28
Quote Anchor link
Goedemiddag!

Ik maak gebruik van een full-screen image gallery met thumbnails die je in staat stellen om verschillende afbeeldingen te selecteren. De thumbnails worden aangemaakt via het stukje javascript hieronder.

Nu ben ik bezig deze thumbnails aan het stijlen en probeer ik een ACTIVE state toe te voegen. De normale state en hover state werken inmiddels, alleen de active state krijg ik niet werkend.

Ik heb al geprobeerd te werken met "#thumb-container img:active" alleen dit mocht niet baten.

Graag jullie advies.

Javascript
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script type="text/javascript">
    var slider;
    var images = [
        "images/productie/1.jpg",
        "images/productie/2.jpg",
        "images/productie/3.jpg",
        "images/productie/4.jpg",
        "images/productie/5.jpg"
    ];
    var index = 0;
    var transitionSpeed = 500;
    var imageIntervals = 5000;
    var startIntervals;
    var intervalSetTime;
    var contentOpen = false;

    $(document).ready(function(){

        slider = $('#slider1').bxSlider({
            mode: 'fade',
            controls: false,
            pause: imageIntervals
        });

        for (i=0;i<=images.length - 1;i++){
            $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
        }

        $(function() {

            $.preload(images, {
                init: function(loaded, total) {
                    $("#indicator").html("<img src='images/load.gif' />");          
                },

                loaded_all: function(loaded, total) {
                    $('#indicator').fadeOut('slow', function() {
                        $('#left-side').fadeIn('slow');
                        $('#thumb-container').fadeIn('slow');

                        $.backstretch(images[index], {speed: transitionSpeed});

                        startIntervals = function (){
                            intervalSetTime = setInterval(function() {
                            index = (index >= images.length - 1) ? 0 : index + 1;
                            $.backstretch(images[index]);
                            slider.goToNextSlide()
                        }, imageIntervals)};

                        startIntervals();                  
                    });
                }
            });
        });
    });

    function goToContent(slideNum){
        clearInterval(intervalSetTime);
        index = slideNum;
        $.backstretch(images[index]);
        slider.goToSlide(slideNum);
        if (contentOpen == false){
            startIntervals();
        }
    };

    function showContent(){
        $('.content-bg').fadeIn('slow');
        clearInterval(intervalSetTime);
        contentOpen = true;
    };
function closeContent(){
        $('.content-bg').fadeOut('slow');
        startIntervals();
        contentOpen = false;
};
</script>



CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#thumb-container{
    display:none;
}

#thumb-container img{
    float:left;
    border:0;
    width: 0;
    height: 0;
    margin:2px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #fff;
}

#thumb-container img:hover{
    float:left;
    border:0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #000;
    }
 
PHP hulp

PHP hulp

09/12/2022 23:18:48
 
Kris Peeters

Kris Peeters

19/10/2012 11:44:41
Quote Anchor link
Kan je in woorden uitleggen wat die actieve state precies is?
Analoog aan de <a> ? Dit is het (heel erg) korte moment tussen de klik op de link en het moment waarop de pagina weg is.

En wat ben je dan van plan?


EDIT
O ja, het gaat om die box slider
Je hebt iets in deze aard:
http://bxslider.com/examples/thumbnails-pager-method-1
En je wil dus een aparte staat voor de thumbnail van de foto die getoond wordt.

Ja?
Gewijzigd op 19/10/2012 12:10:44 door Kris Peeters
 
Sebas V

Sebas V

19/10/2012 12:11:32
Quote Anchor link
Hee Kris,

De active state dient hetzelfde te zijn als de hover.
De image gallery bevat 5 afbeeldingen en daarbij horen 5 thumbnails om de afbeeldingen te selecteren.
Zodra er bijvoorbeeld op afbeelding 2 geklikt wordt, dan dient de desbetreffende thumbnail met de onderstaande stijling gehighlight te worden.

CODE voorbeeld hover state
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
#thumb-container img:hover{
    float:left;
    border:0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #000;
    }


Toevoeging op 19/10/2012 12:12:30:

@Kris: Ja ongeveer wel, dit is dan een full-screen gallery, maar komt op hetzelfde neer ja

Toevoeging op 19/10/2012 13:46:15:

Kris Peeters op 19/10/2012 11:44:41:
Kan je in woorden uitleggen wat die actieve state precies is?
Analoog aan de <a> ? Dit is het (heel erg) korte moment tussen de klik op de link en het moment waarop de pagina weg is.

En wat ben je dan van plan?


EDIT
O ja, het gaat om die box slider
Je hebt iets in deze aard:
http://bxslider.com/examples/thumbnails-pager-method-1
En je wil dus een aparte staat voor de thumbnail van de foto die getoond wordt.

Ja?



Kris ik merk dat met deze code de kleur verandert zodra ik erop klik, maar het is mij nog niet gelukt om deze kleur te tonen wanneer de desbetreffende afbeelding getoond wordt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
#thumb-container img:active {
    float:left;
    border:0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #F00;
}
Gewijzigd op 19/10/2012 13:47:01 door Sebas V
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.