 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Benutzer 31237
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 30.08.2011 01:57
Titel Grafik-Austausch mit jQuery |
  |
|
Hallo,
ich bin zur Zeit dabei, mein Portfolio aufzubauen und bräuchte ein wenig Hilfe, wenn es geht.
Die URL: http://cargocollective.com/shap
Wie man sieht habe ich dort eine transparente PNG Grafik, die über 15 animierte gif Thumbnails liegt.
Ich versuche ein Script zu finden, das ein/mehrere dieser Thumbnails entweder zufällig oder nach einer bestimmten Zeit austauscht.
So möchte ich ein paar kleine gif animationen in den einzelnen TVs einblenden- Ich hoffe, das macht soweit Sinn.
Soweit habe ich nur dieses Stück code hier:
| Code: | function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "noisy_static.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
}
|
Allerdings weiß ich damit wenig anzufangen, und hoffe, jemand könnte mir helfen, das ganze in meinem Cargo Collective system zu integrieren.
Ich wäre sehr dankbar 
Grüße,
s
|
|
| |
|
 |
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: 
|
Verfasst Di 30.08.2011 09:49
Titel
|
|
|
Da brauchst du das Rad nicht neu erfinden, für jQuery gibt es da einige interessante Plugins.
Schau dir einfach mal jQuery Cycle an.
Gruß
|
|
| |
  |
|
|
Anzeige
|
|
|
Benutzer 31237
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 30.08.2011 14:10
Titel
|
|
|
hey ho, danke für die antwort!
Bei mir geht allerdings mehrt darum, dass ich nicht das Wissen habe,
um sowas einzubauen, vor allem weil meine webseite auf dem Cargo Collective System ist
(das ist eine Plattform die Portfolio-Vorlagen zur Verfügung stellt)
Das heisst ich bräuchte jemanden der entweder Cargo kennt, oder sich ein paar Minuten nehmen würde
um sich den Aufbau und CSS anzuschauen, um mir zu sagen, wie ich das einbaue.
Ich würde auch dafür etwas zahlen, aber eigentlich handelt es sich hier wirklich nur um ein paar minuten Arbeiten.
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Di 30.08.2011 14:23
Titel
|
|
|
| immerIch hat geschrieben: | Da brauchst du das Rad nicht neu erfinden, für jQuery gibt es da einige interessante Plugins.
Schau dir einfach mal jQuery Cycle an.
Gruß |
Man muss aber auch nicht für jede Kleckeranwendung ein 15 KB großes Plugin verwenden.
|
|
| |
|
|
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Di 30.08.2011 14:29
Titel
|
|
|
| pantonine hat geschrieben: | | immerIch hat geschrieben: | Da brauchst du das Rad nicht neu erfinden, für jQuery gibt es da einige interessante Plugins.
Schau dir einfach mal jQuery Cycle an.
Gruß |
Man muss aber auch nicht für jede Kleckeranwendung ein 15 KB großes Plugin verwenden. |
um sowas schnell zu machen braucht man nich mal ein js framework. DOM-Manipulationen kann man auch so mit nur wenigen Zeilen machen.
@shahak: Was alles kannst du denn beeinflussen da?
Zuletzt bearbeitet von Pixelpole am Di 30.08.2011 14:30, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Benutzer 31237
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 30.08.2011 14:41
Titel
|
|
|
ok, ich versuche es zu beschreiben:
Ich kann bei Cargo 2 Dinge beeinflussen: HTML und CSS.
Es gibt also sozusagen eine HTML und eine CSS datei, und nur auf diese habe ich zugriff.
Alles was mit jQuery zu tun hat packe ich einfach in den HTML Bereich rein.
So sieht z.B. grade mein HTML bereich aus, die CSS kann ich euch auch gerne reinkopieren (ist lang),
oder, wenn jemand so gut ist und ein paar minuten hat mir zu helfen, gebe ich auch gerne die Zugangsdaten.
| Code: | <!------------------------------ Loading Screen ------------------------------>
<script type="text/javascript">
$(window).bind("load", function() {
$('#load_fade').fadeOut(1000);
});
</script>
<div id="load_fade" style="
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: black;
z-index: 300;
display: block;
">
</div>
<!------------------------------ iPad Twick ------------------------------>
<script type="text/javascript">
$(document).ready(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".project_thumb").bind('touchend', function(){
console.log("touch ended");
});
</script>
<!------------------------------ HIDE TVS ------------------------------>
<script type="text/javascript">
$(document).bind("projectLoadComplete", function(e, pid){
$('.tvs').hide();
});
$(document).bind("projectIndex", function(e, pid) {
$('.tvs').show();
});
</script>
<!------------------------------ Rollovers ------------------------------>
<script type="text/javascript">
$(document).ready(function(){
createHover();
});
function createHover() {
$(".project_thumb").unbind('mouseenter').unbind('mouseleave'); // reset the hover to prevent doubling
$(".project_thumb").bind("mouseenter",function() { // crete hover
$("img", this).fadeTo("fast", 0.0); // Sets the opacity to 70% on hover
}).bind("mouseleave",function(){
$("img", this).fadeTo("fast", 1.0); // Sets the opacity back to 100% on mouseout
});
$(".next_page").attr("onclick",""); // remove the pagination function
$(".prev_page").attr("onclick",""); // remove the pagination function
$(".next_page").click(function() { changePage((parseInt($("#current_page").val())+1),$("#limit").val()); setTimeout("createHover()",100); });
$(".prev_page").click(function() { changePage((parseInt($("#current_page").val())-1),$("#limit").val()); setTimeout("createHover()",100); });
}
</script>
<!------------------------------ Image Change ------------------------------>
<script type="text/javascript">
$(document).ready(function() { changer(); });
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "http://yaplog.jp/cv/omb-master/img/449/noise_p.gif";
if ($img.attr("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif") == newsrc) {
$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif", $img.data("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif"));
} else {
$img.data("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif",$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif"));
$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif", newsrc);
}
setTimeout(changer, time);
}
</script>
<!------------------------------ TVs ------------------------------>
<div class="tvs">
<img src="http://img4.imageshack.us/img4/2493/tvs3.png" style="position:absolute; z-index:9999;pointer-events: none;">
</div>
|
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Di 30.08.2011 14:59
Titel
|
|
|
Um jetzt was zu testen, hab ich zwar keine Zeit, aber | Code: | <script type="text/javascript">
$(function() { changer(); });
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "http://yaplog.jp/cv/omb-master/img/449/noise_p.gif";
if ($img.attr("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif") == newsrc) {
$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif", $img.data("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif"));
} else {
$img.data("http://payload.cargocollective.com/1/1/39798/479571/prt_166x132_1314132456.gif",$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif"));
$img.attr("http://yaplog.jp/cv/omb-master/img/449/noise_p.gif", newsrc);
}
setTimeout(changer, time);
}
</script> |
macht mal absolut keinen Sinn 
Das gehört wohl eher so:
| Code: | function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "http://yaplog.jp/cv/omb-master/img/449/noise_p.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
} |
Im FF drückst mal besser Strg-Shift-J - der sagt dir, was nich stimmt...
|
|
| |
|
|
Benutzer 31237
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 30.08.2011 15:04
Titel
|
|
|
sorry, bin doof was sowas angeht 
habe ich eingegeben, schaut euch aber mal die Seite an:
http://cargocollective.com/shap
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery div Austausch
jQuery hover über größere Grafik
jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
Globaler Austausch von grafischen Erzeugnissen?
Austausch des Durchsuchen/Browse Buttons
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
