गतिशील आकार के चित्रों के साथ मोज़ेक ग्रिड गैलरी [बंद]


80

मुझे बस एक प्रोजेक्ट के लिए निम्न चित्र प्राप्त हुआ है, एक छवि ग्रिड गैलरी के लिए, गतिशील चौड़ाई और ऊंचाई छवियों (उपयोगकर्ता द्वारा प्रस्तुत चित्र) के साथ। (पोस्ट के अंत में स्क्रीनशॉट)

मैंने jQuery मेसनरी , Tympanus Automatic Image Montage और CSS-Tricks सीमलेस रिस्पॉन्सिव फोटो ग्रिड की कोशिश की है , लेकिन प्रत्येक की सीमा है।

  • Jquery चिनाई दोनों चौड़ाई और ऊंचाई के लिए गतिशील होने की अनुमति देता है, हालांकि वहाँ उत्पन्न अंतराल हैं
  • बाद की 2 स्क्रिप्ट्स, बहुत अच्छी ग्रिड उत्पन्न करती हैं, लेकिन इस समस्या के साथ कि या तो चौड़ाई या ऊंचाई स्थिर होनी चाहिए

संपादित करें: मैं भर में आया था, आइसोटोप , जो लगभग सही है और मैं शायद इसका उपयोग करना समाप्त कर दूंगा, जब तक कि कुछ ऐसा नहीं है जो मेरी आवश्यकताओं को ठीक करता है। इसलिए मेरा सवाल अभी भी वही है ...

क्या कोई जावास्क्रिप्ट (अधिमानतः jQuery) स्क्रिप्ट है जो पूरी तरह से गतिशील मोज़ेक (छवि आकार के संबंध में) उत्पन्न कर सकती है, जैसे नीचे स्क्रीनशॉट में एक?

किसी भी मदद के लिए धन्यवाद


गेलरी


धन्यवाद कि यह मेरी तरह दिखता है जिसकी मुझे आवश्यकता है। क्या आप कृपया इसे उत्तर के रूप में जोड़ सकते हैं ताकि मैं आपको उचित रूप से क्रेडिट दे सकूँ और प्रश्न का उत्तर दे सकूँ?
डॉगोकू

@ डोगोकू आप साझा कर सकते हैं कि आप आइसोटोप में एक साथ ऊंचाई और चौड़ाई को गतिशील कैसे बनाते हैं?
मार्क विटैल

चेतावनी: Tympanus स्वचालित छवि असेंबल लिंक कचरे का एक छोटी गाड़ी है।
शिप्सएप

आप यूनाइटगैलरी को यूजर कर सकते हैं । यह उत्तरदायी है और इसके पास लिंक, आइकन, लाइटबॉक्स आदि जैसे विभिन्न विकल्प उपलब्ध हैं
आरएन कुशवाहा

मैं ऊपर की छवि के समान आउटपुट चाहता हूं। चित्र विभिन्न आकारों के हैं, लेकिन अंत में कोई अंतराल नहीं चाहिए। Freewall मेट्रो स्टाइल ग्रिड मेरे लिए काम नहीं कर रहा है क्योंकि सभी चित्र हैं। कृपया सहायता कीजिए!
मोनिशा

जवाबों:


64

मैं सुझाव देता हूं Freewall। यह कई प्रकार के ग्रिड लेआउट बनाने में आपकी सहायता करने के लिए एक क्रॉस-ब्राउज़र और उत्तरदायी jQuery प्लगइन है: लचीला लेआउट, चित्र लेआउट, नेस्टेड ग्रिड लेआउट, मेट्रो शैली लेआउट, लेआउट की तरह Pinterest ... अच्छा CSS3 एनीमेशन प्रभाव और कॉल बैक ईवेंट के साथ। फ्रीवेल डेस्कटॉप, मोबाइल और टैबलेट के लिए डायनेमिक ग्रिड लेआउट बनाने के लिए सभी में एक समाधान है।

होम पेज और दस्तावेज़: भी मिला here


12
इसका अध्ययन: सहायक हो सकता है crispymtn.com/stories/…
mayankcpdixit

@mayankcpdixit यह बेहद मददगार है, धन्यवाद
zavr

1
tnx @zavr मैंने अपना कुछ बनाया। github.com/mayankcpdixit/grid-no-white
mayankcpdixit

@mayankcpdixit, अच्छा, अच्छा किया। मैंने अपना खुद का बनाया, साथ ही jQuery प्लगइन।
20

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.